JS cookie与web存储（localStorage与sessionStorage）

cookie

<script>
	document.cookie = 'a=1'
	console.log(document.cookie) // style=null; a=1
</script>

设置了cookie，请求会携带给服务端。
cookie的构成：
名字name
值value
域domain
路径path
过期时间expires
安全标志secure

• 设置了cookie后，只要请求的域和路径正确，就会自动携带cookie
• 框架中也许需要在配置中手动设置withCredentials为true，这里是允许跨域携带cookie
• 以及服务端设置Access-Control-Allow-Credentials为true

localStorage

<script>
	localStorage.setItem('a', 1)
	// 等同于 localStorage.a = 1
	// 等同于 localStorage['a'] = 1
	console.log(localStorage.getItem('a')) // 1
	// 等同于 localStorage.a
	// 等同于 localStorage['a']
	typeof localStorage.getItem('a') === string // true
</script>

sessionStorage

<script>
	sessionStorage.setItem('a', 1)
	// 等同于 session.a = 1
	// 等同于 session['a'] = 1
	console.log(session.getItem('a')) // 1
	// 等同于 session.a
	// 等同于 session['a']
	typeof session.getItem('a') === string // true
</script>

三者的概述

• cookie是最开始的存储方式，要想方便使用，就要自己写一个小插件来解析cookie。cookie在页面关闭时就会删除，并遵循同源策略，别的页面不能访问本页面的cookie。document.cookie = 'a=1'中，不是对cookie的覆盖，而是追加a=1.如果再执行document.cookie = 'b=2'，那输出就是style=null; a=1; b=2
• localStorage和sessionStorage都是Storage的实例，是后于cookie出现的网页存储方式，其增删改查的API都相同，唯一的区别就是localStorage是永久存储，sessionStorage会在页面关闭时自动删除。
  PS:sessionStorage无法在本地文件使用，必须有和服务端的会话。

cookie小插件

class CookieUtil {
    
    
  static get(name) {
    
    
    let cookieName = `${
      
      encodeURIComponent(name)}=`,
      cookieStart = document.cookie.indexOf(cookieName),
      cookieValue = null;
    if (cookieStart > -1) {
    
    
      let cookieEnd = document.cookie.indexOf(';', cookieStart);
      if (cookieEnd === -1) {
    
    
        cookieEnd = document.cookie.length;
      }
      cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length), cookieEnd);
    }
    return cookieValue;
  }
  static set(name, value, expires, path, domain, secure) {
    
    
    let cookieText = `${
      
      encodeURIComponent(name) = encodeURIComponent(value)}`
    if (expires instanceof Date) {
    
    
      cookieText += `;expires="${
      
      expires.toGMTString()}"`
    }
    if (path) {
    
    
      cookieText += `;path="${
      
      path}"`;
    }
    if (domain) {
    
    
      cookieText += `;domain="${
      
      domain}"`;
    }
    if (secure) {
    
    
      cookieText += `;secure="${
      
      secure}"`;
    }
    document.cookie = cookieText;
  }

  static unset(name, path, domain, secure) {
    
    
    CookieUtil.set(name, "", new Data(0), path, domain, secure);
  }
}

CookieUtil.set('a', 1)
const a = CookieUtil.get('a')
console.log(a); // 1