SessionStorage 和 LocalStorage 使用操作基本类似,两者最主要的区别在于生命周期不同,SessionStorage 顾名思义就是存在与会话阶段,当会话结束时,SessionStorage 存储的数据即会失效。那么关键来了什么才表示会话结束?其实在浏览器中一个活动标签页即代表一个会话Session,如果当前标签页被关掉即代表,当前会话结束,此时当前 SessionStorage 中存储的数据就会被浏览器自动销毁。

1、sessionStorage存储数据的特点

(1)sessionStorage受到同源策略限制。

(2)sessionStorage存储数据还受到浏览器选项卡的限制。

(3)手动新开一个选项卡,即便同域同URL,也不会共享sessionStorage数据。

(4)当前选项卡关闭,sessionStorage中存储的数据也随之被销毁。

2、数据共享方式

首先要明确一个概念,在新选项卡或者窗口打开一个新的页面,会新创建一个sessionStorage会话。

手动新开一个选项卡,即便同域同URL,也不会共享Sessionstorage数据。但是并不是说就没有办法共享sessionStorage存储的数据,准确的说不是共享,而是拷贝一份。

刷新当前页面,或者通过location.hrefwindow.open、或者通过带target="_blank"a标签打开新标签,之前的sessionStorage还在。sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页,通过其它方式新开的窗口或标签不认为是同一个session,即:

(1)通过手动方式新开一个选项卡或者窗口不会共享数据。

(2)通过JavaScript或者链接标签打开同源页面会共享数据(准确说是拷贝一份),两者是独立的。

假设A页面通过sessionStorage存储一些数据,页面中有一个链接指向同源的B页面。点击链接,在新的选项卡打开B页面,那么A页面的数据会被B页面共享(事实是拷贝了一份)。 两个页面的数据是相互独立的,在B页面删除一条记录,并不会影响A页面中的数据。

注:通过带target="_blank"的a标签、window.open等方式打开新窗口时,会把旧窗口(或标签)的sessionStorage数据带过去,但从此之后,新窗口(或标签)的sessionStorage的增删改和旧窗口已经没有关系了,如果只是在当前标签内跳转新页面(或者刷新),数据还会保留(前提当然是同域)。

3、思考

(1)使用浏览器打开两个同样的网站,这两个网站的 SessionStorage 是共享的吗?

不共享

(2)当我们重新刷新一个页面那么 SessionStorage 中的数据会消失吗?

不会

(3)采用target="_blank"的A标签、window.open等方式打开新窗口后,新旧数据会同步吗?

不会

(4)浏览器刷新到底做了什么?

浏览器刷新做的只是重新加载网页数据【强制刷新的区别只是不使用浏览器缓存下来的HTML、JS数据,所有本页面用到的HTML、JS都需要重新向服务器获取】,并重新解析生成 DOM 树,当然还同时会重新解释执行 JavaScript 代码,之后重新绘制页面,注册绑定事件,之前页面在活动的时候对 JavaScript 变量做的数据赋值数据都会消失。

posted on 2021-05-08 10:40  李起桉  阅读(3770)  评论(0编辑  收藏  举报