HTML5 web存储

一、web存储

HTML5提供了web存储，可以在客户端存储一些数据，这些数据仅在客户端中保存，不参与和服务器的通信，主要分为以下两种存储：

localStorage ：生命周期是永久，除非用户清除，否则这些信息将永久存在。

sessionStorage：仅在当前会话下有效，关闭浏览器后被清除。

不同浏览器无法共享sessionStorage和localStorage中的信息。

相同浏览器不同页面的localStorage可以共享（遵循同源策略，跨域的不可），但不同页面或标签页的sessionSorage无法共享。页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

 

相关API接口，sessionStorage的API与此类似
 //设置一项，这里的value是string，如果是数组或对象的需要使用JSON.stringfy()进行转换
localStorage.setItem(key, value);   

//获取 localStorage 项
let cat = localStorage.getItem(key);

//移除 localStorage 项
localStorage.removeItem(key);

//移除所有的 localStorage 项
localStorage.clear();

二、与cookie的区别

1.cookie需要参与到与服务器的通信，会携带在HTTP头中

2.cookie在过期时间之前一直有效，即使窗口关闭

 

参考https://segmentfault.com/a/1190000012057010

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage