浏览器: SessionStorage可以跨标签共享嘛？

某某某人
756 阅读5分钟

先有问题再有答案

  1. sessionStorage的设计目的是什么？
  2. sessionStorage都有哪些方法？
  3. sessionStorage可以跨标签共享嘛？
  4. 刷新当前页面sessionStorage的数据还在吗？
  5. 通过window.open的方式打开可以共享sessionStorage嘛？
  6. sessionStorage所谓的会话共享到底是什么意思？
  7. sessionStorage vs localStorage 有什么区别？

API方法

setItem(key, value)

setItem 方法用于向 SessionStorage 添加一个键值对。如果该键已经存在，则更新其值。

sessionStorage.setItem('username', 'John Doe');

getItem(key)

getItem 方法用于按键名获取 SessionStorage 中对应的值。如果该键不存在，则返回 null。

let username = sessionStorage.getItem('username');

removeItem(key)

removeItem 方法用于按键名删除 SessionStorage 中存储的键值对。

sessionStorage.removeItem('username');

clear()

clear 方法用于清空 SessionStorage 中所有的键值对。

sessionStorage.clear();

key(index)

key 方法按索引获取键名。返回 SessionStorage 中第 index 个键名，如果不能匹配，则返回 null。

sessionStorage.key(4)

length 属性

length 属性返回 SessionStorage 中存储的键值对数量。

sessionStorage.length // 返回当前sessionStorage存储的内容长度

设计目的

SessionStorage 是 HTML5 提供的一种客户端存储机制，旨在满足在一个浏览器会话（如一个标签页或窗口）期间存储数据的需求。其设计目的是提供一种容易使用、轻量级且安全的方式来存储和管理 会话范围内的临时数据。

增强数据存储能力

相比于传统的 Cookie，SessionStorage 可以存储更多数据（通常5MB或更多）。这是因为 Cookie 通常用于小型数据的存储，并自动随每个请求发送给服务器，从而增加了请求的开销。

减少服务器负载：

通过在客户端存储数据，减少因频繁请求服务器而产生的网络负载。

安全性和独立性

SessionStorage提供一种方式来临时存储数据，数据仅在当前浏览器会话内有效，且在不同的标签页或窗口中是独立的，不会相互影响。关闭标签页或窗口后数据自动清除，提供了一种天然的清理机制。

易用性

提供了简便的 API（如 setItem, getItem, removeItem, clear），使得在会话期间存储和使用数据非常方便。

应用场景

由于 SessionStorage 的特性，它在以下情况中特别有用：

表单数据保存

当用户在填写表单时，SessionStorage 可用于保存临时输入的数据。如果页面意外刷新，可以帮助恢复这些数据，避免数据丢失。

临时状态存储

用于存储页面的临时状态或用户偏好设置，比如用户在一个单页应用中做出的临时配置或选项。用于页面之间的数据传递，避免页面重新加载时丢失数据。适用于购物车等不需要长期保存的数据。

会话共享到底是什么意思？

SessionStorage 用于在浏览器会话（session）期间存储数据
那么要如何理解这个会话的概念呢？

测试用例

具体可以看如下测试用例：

  • 当前页面设置sessionStorage键值对： 1.png 页面内可以共享设置的键值对

  • 刷新当前页面： 2.png 可以正常获取到设置的键值对, 刷新页面可以保持会话

  • 新建一个同域的tab标签 3.png 无法获取到设置的键值对

  • 在原页面通过window.open的方式新建tab 4.png 可以打印设置的键值对
    然而 这个情况下属于共享了sessionStorage的会话状态嘛？
    我们在原来的tab下 在新增一个键值对_age: 18
    5.png

  • 然后在获取新设置的内容 6.png 可以看到 并没有获取到
    所以通过window.open的方式打开的tab并没有与原tab共享sessionStorage的存储
    而是在打开的时候复制了上一个会话内容 因此是可以获取到之前的数据 而无法获取打开后的数据 因为在执行过window.open方法后 两个会话已经彼此独立 互不相关了。

总结

sessionStorage的会话在刷新当前tab时可以保持；
在新建tab时无法保持；
在通过window.open新建tab后可以在新建会话时复制上一个会话，之后两个彼此独立。

sessionStorage vs localStorage

相同点：

  1. 都遵循同源策略：只有在相同的协议、域名和端口下，数据才能被访问。
  2. 两者的容量限制一般都在 5MB 左右，但具体数值因浏览器不同而有所变化。
  3. API 方法完全一致，包括 setItem(), getItem(), removeItem(), clear(), 和 key()。易于使用，提供了简洁易用的操作数据的接口。

不同点：

两者都是 HTML5 提供的客户端存储机制，用于在浏览器中存储键值对数据。尽管它们有一些共同点，但它们的设计目的还是有些许不同的。

  • 生命周期
    SessionStorage：数据在当前浏览器窗口或者标签页的会话期间有效。关闭浏览器窗口或者标签页后，数据会被清除。
    localStorage：数据持久存储，除非明确删除，否则数据不会过期，关闭浏览器窗口或者标签页后数据依然存在。

  • 作用域
    SessionStorage： 限于同一标签页或窗口，且对同源的不同标签页是 隔离 的。
    localStorage:在同一浏览器中，所有同源网页共享同一个存储空间。

avatar
文章
阅读
粉丝