sessionStorage和localStorage比较

sessionStroage MDN

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
• 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同【附录1】。
• 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
• 关闭对应浏览器tab，会清除对应的sessionStorage。

应该注意的是，无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。(sessionStorage 只存在于当前标签页，其他标签页看不到，也不能访问)

 

附录1：在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这句不好理解，意思是点击当前页面的 <a target="_black"></a> 标签时，在新页面中的 sessionStorage 的值是复制的当前页面的，注意并不是共用的。 （参考优秀文章并实践验证）

实践：【谷歌 版本 80.0.3987.149（正式版本） （64 位）； 准备两个页面，一个页面修改sessionStorage 的值，另一个页面监听当前sessionStorage 的值是否发生变化】：

(不同标签页， 拥有各自的sessionStorage ，互不影响)

 

localStroage MDN

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

 

实践：【谷歌 版本 80.0.3987.149（正式版本） （64 位）； 准备两个页面，一个页面修改localStorage的值，另一个页面监听当前localStorage的值是否发生变化】：

(

1.非无痕模式下，同一浏览器，无论是同一窗口的新标签页，还是新的窗口，只要是页面协议相同的页面，就都共同维护一份localStorage。
2.无痕模式下，尽管页面协议相同，各窗口的localStorage也是独立的。

)  

 

localStorage,sessionStorage比较

过期时间

很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现

 

MDN document.cookie , 菜鸟教程

MDN HTTP Cookie (待学习)