关于sessionStorage和localstorage的一些记录

最初接触到localstorage,简单了解过和session的区别

大致如下:local:永久存储,除非手动删除或者修改,基于域名,能存储大约5m左右的内容(写这段话的时候打开了detools发现了:原来是酱紫!

session:非永久存储,仅在当前标签页存在的时候存储于sessionstorage中,当前页关闭则自动清除已存储内容

浮于表面了解到的就是这些。

最近遇到一个需求,考虑到一种解决方法是利用storage,起初使用了localstorage,setItem和removeItem都毫无问题,后来想试试sessionstorage,问题来了

复现一下情况是,点击一个链接重新打开一个标签页,这个click事件触发了setItem的操作,目的是要在新打开的标签页拿到存储的内容去判断需要渲染的组件,因为其他时候用不到当前存储的内容,于是想要在拿到该内容之后remove掉它。使用localstorage时,一切都按照预期进行,但是sessionstorage却出了问题,问题出在removeItem的操作上,session的remove仅删除掉了当前标签页的存储内容,对于跳转前的页面来说,session存储的内容还在那,除非手动删除或者关闭页面,数据将会一直影响后续相关操作。

按照我浅薄的见识和理解,对于localstorage来说,存储的键值对更像是引用类型数据的一种存在,只要是同源标签页,对其进行的操作都会实时反馈在各个页面上

对于sessionstorage,再打开新的同源标签页时的操作,更像是复制了一份源标签页的存储内容,而在本页面对存储页面所做的任何操作都不会反馈到源页面,也就是说两份sessionstorage其实是相互独立的,关系就只是打开新的标签页时,继承了已经有的一份数据而已。边思考边写到这里似乎才真正理解了sessionstorage的特性之一:会话结束时清除存储的session数据。

也就是说若浏览器打开了多个同源的标签页,当关闭某一标签页时,其他标签页存储或修改的数据理应是继续存在的,因此跟随当前标签页的关闭而删除的,当然也仅仅知识当前页所操作的数据了,也就是说,session和local之间除了上面所说字面上的区别之外,更深层还有一个区别就是local的数据是同源页面共同维护一份,session的数据是各个页面独立维护各自的数据。

--学海无涯 

以为这两个东西的区别如字面般简单明了,结果这才发现只是自己仅仅了解了个字面意思而已

关于同源页面等待具体去了解,以上所说不包括所有同源页面的跳转情形,总体来说,如果需要存储数据共享就选择localstorage进行存储

原文地址:https://www.cnblogs.com/lesliecn/p/12105289.html