在传统的session机制中,设置session的有效期为关闭浏览器session就失效。这个背景下,刷新页面并不影响session的保持、同域下跨页面也能保持sesison。
但如果使用sessionStorage来保持数据,必须是同一个标签下的,通过<a target="_blank">打开的页面,sessionStorage的内容也会被清空。
注意:对于 sessionStorage 和 localStorage,它们的键和值都是以字符串形式存储的。所以在存储数字类型的时候,需要先将数字转换为字符串形式(不显式转的话,JavaScript会自动转换为字符串)。读取的后,使用时,如果是进行其他数据类型的相关运算,注意要把字符串转回对应类型
作用域 | 全局变量 | sessionStorage | localStorage | Cookies |
---|---|---|---|---|
生命周期 | 页面关闭或刷新前【刷新就会丢失】 | 窗口或标签关闭前【刷新不丢失,本标签中跳转页不丢失,本标签中setItem后通过地址栏打开其他网站又通过地址栏打开本原页面或有getItem的页面,还是不会丢失】,通过<a target="_blank">打开的页面,会丢失。 | 手动清除或覆盖前 | 指定过期日期或手动清除前 |
可访问性 | 在页面或脚本中任何地方可访问 | 仅在创建它们的窗口/标签中可访问 | 在创建它们的窗口/标签中可访问,以及具有相同源的任何其他窗口/标签可访问 | 在同一域上的任何脚本都可以访问 |
容量 | 无限制 | 每个来源通常为 5-10 MB | 每个来源通常为 5-10 MB | 每个 cookie 限制为 4KB,每个域名最多为 50 个 cookie |
存储位置 | 内存 | 磁盘 | 磁盘 | 磁盘 |
安全性 | 不太安全 | 更安全 | 更安全 | 不太安全 |
用途 | 通常用于存储临时数据或配置 | 用于存储会话特定数据 | 用于存储持久数据 | 用于存储用户偏好设置或会话 ID 等小数据 |
特性 | sessionStorage | localStorage | Cookie |
---|---|---|---|
存储容量 | 5MB(不同浏览器可能略有不同) | 5MB(不同浏览器可能略有不同) | 受浏览器限制,通常为几KB至几MB不等 |
存储时效 | 页面会话结束时清除 | 永久保存 | 可设置过期时间 |
数据共享 | 同一标签页/窗口中共享 | 同一域名下的所有标签页/窗口共享 | 同一域名下的所有标签页/窗口共享 |
发送到服务器 | 不发送到服务器 | 不发送到服务器 | 每次请求时都会发送到服务器 |
API 访问 | sessionStorage API | localStorage API | 通过 document.cookie 访问 |
存储内容类型 | 只能存储字符串 | 只能存储字符串 | 可以存储字符串或二进制数据 |
安全性 | 相对较安全,不容易被攻击 | 相对较安全,不容易被攻击 | 可以被恶意网站访问和修改 |
sessionStorage 的作用域:【同一浏览器会话中的所有页面】
指的是同一个浏览器窗口或标签页中打开的所有页面,包括:
- 通过
<a>
标签直接打开的页面 - 通过
<script>
标签动态加载的页面 - 通过
window.location.href
或window.open()
方法打开的页面
具体来说,以下情况下的页面可以访问和修改 sessionStorage 中的数据:
- 在同一个浏览器窗口中打开的多个页面(包括先后在同一窗口的地址栏输入a.htm ,b.htm, c.htm打开)
- 在同一个标签页中打开的多个页面(包括先后在同一标签的地址栏输入a.htm ,b.htm, c.htm打开)
- 通过
<iframe>
标签嵌入的页面 - 通过
window.open()
方法打开的页面,但前提是该页面与父页面同源
以下情况下的页面无法访问和修改 sessionStorage 中的数据:
- 通过
<a target="_blank">
打开的页面,因为该页面属于不同的浏览器会话 - 不同浏览器窗口中的页面
- 不同浏览器中的页面
- 不同域名下的页面