实际中使用Javascript中sessionStorage的注意事项

比眉伴天荒 2022-12-28 12:53 223阅读 0赞

平常时候使用sessionStorage，只是相当于把他当做临时的缓存，当用户在页面间跳转的时候可以共享数据。

但如果细细分析，sessionStorage还是有一些注意事项的。了解这些，可以避免在项目中出现莫名其妙的问题。

首先引用一段MDN的解释：

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

#### 第一句话 ####

重新加载就是指刷新，这个刷新包括：

*  window.location.reload()，
 *  点击浏览器的刷新按钮
 *  ctrl + R快捷键

其实不仅仅包含以上三个，还包括两种

*  硬性重新加载，快捷键是ctrl+shift+R
 *  清除缓存并硬性重新加载  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]

以上**均不会**清空sessionStorage

其次**恢复页面**是指比如你用任务管理器杀掉浏览器进程，然后再次打开浏览器，这时候浏览器会提示你是否恢复页面，这个时候你仍旧可以拿到session。

#### 第二句话 ####

新标签页和窗口正常打开都是新的sessionStorage。也就是说，新的标签页或窗口均不会使用上一个标签页或窗口的sessionStorage。

此外顶级浏览会话是指如果内部嵌套了iframe，当iframe加载的时候，是可以使用当前标签或窗口的sessionStorage的。

#### 第三句话 ####

更明确的说明了各个标签页不共享sessionStorage，即使是相同的url。

#### 第四句话 ####

指明了session会在关闭浏览器或标签页的时候被清除

#### 补充 ####

还有以下两种情况值得注意

*  window.open 会打开一个新的标签页，但是会共享sessionStorage
 *  <a \_target=“blank” >也是会共享sessionStorage的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/c11905c8d069449a972b8a242bd18647.png

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中的sessionStorage

JavaScript中的sessionStorage 该文章需要联系这篇文章学习：[JavaScript中的localStorage ][JavaScript_loc

àì夳堔傛蜴生んèń/ 2024年03月31日 16:07/ 0 赞/ 47 阅读

相关实际中使用Javascript中sessionStorage的注意事项

平常时候使用sessionStorage，只是相当于把他当做临时的缓存，当用户在页面间跳转的时候可以共享数据。但如果细细分析，sessionStorage还是有一些注意事项

比眉伴天荒/ 2022年12月28日 12:53/ 0 赞/ 224 阅读

相关 javaScript中使用alert()的一些注意事项

大家应该对alert()方法都不陌生，应该也用过它来反映运行中一些值。 alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。语法：`alert(me

古城微笑少年丶/ 2022年09月29日 12:56/ 0 赞/ 300 阅读

相关 Python中的self使用注意事项

self的使用要点 1.Python中的self等同于Java中的this，表示当前对象，当前正在操作的对象，而不是当前类 2.某个对象调用其方法时，python解释器

╰+哭是因爲堅強的太久メ/ 2022年05月16日 05:58/ 0 赞/ 292 阅读

相关 JavaScript中的new的使用方法与注意事项详解

原文：http://www.jq-school.com/Show.aspx?id=70 [JavaScript][]是一门基于原型的语言，但它却拥有一个 new

怼烎@/ 2022年05月13日 21:15/ 0 赞/ 188 阅读

相关 JAVA实际工作中开发注意事项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

╰+哭是因爲堅強的太久メ/ 2022年04月24日 08:08/ 0 赞/ 366 阅读

相关 JavaScript中的new的使用方法与注意事项详解

原文：http://www.jq-school.com/Show.aspx?id=70 [JavaScript][]是一门基于原型的语言，但它却拥有一个 new 操作符使得其

迷南。/ 2022年04月15日 07:41/ 0 赞/ 195 阅读

相关 JavaScript中的new的使用方法与注意事项详解

原文：http://www.jq-school.com/Show.aspx?id=70 [JavaScript][]是一门基于原型的语言，但它却拥有一个 new 操作符使得其

太过爱你忘了你带给我的痛/ 2022年04月15日 07:41/ 0 赞/ 222 阅读

相关 Storm实际开发注意事项

一、使用组件的并行度代替线程池 Storm 自身是一个分布式、多线程的框架，对每个Spout 和Bolt，我们都可以设置其并发度；它也支持通过reb

Dear 丶/ 2022年03月29日 10:26/ 0 赞/ 361 阅读

相关 JavaScript中const,var,let使用注意的事项

JavaScript中const,var,let区别 JavaScript中三种定义变量的方式const， var， let的区别。 1.const定义的变量不可以修改，而

小咪咪/ 2022年03月18日 11:22/ 0 赞/ 328 阅读