localStorage、sessionStorage、cookie 使用整理

下面从这几方面进行梳理

1. 存储形式
2. 相同点
3. 不同点
4. 使用方法
5. 用途
6. 多标签之间通讯

一、存储形式

1、localStrong 、 sessionStorage 已key value 的方式存储
2、cookie 以字符串的形式存储 包括 name value expires（过期时间） path （允许访问路径）

二、相同点

localStorage、sessionStorage、cookie 都可以做数据存储

三、不同点

1、localStorage、sessionStorage 存储数据在 5M 左右（不同浏览器之间存在差异）cookie 存储数据在 4K 左右
2、localStorage、sessionStorage 存储不参与网络通讯，cookie 会携带在请求头参与网络通讯
3、localStorage 生命周期永久有效，除非手动删除。sessionStorage 存储在当前浏览器打开的标签页，当用户关闭标签页sessionStorage 存储内容自动清除。cookie 在不设置过期时间时，当浏览器标签页关闭时失效，设置过期时间则在超过过期时间时失效。

四、使用方法

存储数据

1、localStorage
	window.localStorage.setItem(key, value: String)
2、sessionStorage
	window.sessionStorage.setItem(key, value:string)
3、cookie
	document.cookie = "key=value;key=value;";

获取数据

1、localStorage
	window.localStorage.getItem(key)
2、sessionStorage
	window.sessionStorage.getItem(key)
3、cookie
getCookie() {
  const start = document.cookie.indexOf("name:=");
  const end = document.cookie.indexOf(';', start)
  if (end == -1) {
    end = document.cookie.length
  }

  return unescape(document.cookie.substring(start, end))
}
获取cookie 的第二种方式
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

删除数据方式

1、localStorage
	window.localStorage.removeItem("key")
2、sessionStorage
	window.sessionStorage.removeItem("key")
3、cookie
将 expires 设置为过期时间即可

五、用途

可以存储用户信息，记录用户行为，token，登录状态

六、多标签之间通讯

可以监听 storage 方法，当localStorage 值发生改变时可以触发其他标签页的 storage 方法。不同浏览器略有差异（IE：你们都看我干嘛）

window.addEventListener('storage', storageListener, false)

function storageListener(event) {
   console.log('---------------- event ------------', event);
}