sessionStorage小坑：必须保持在统一个浏览器Tab中。

在传统的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"> 打开的页面，因为该页面属于不同的浏览器会话
• 不同浏览器窗口中的页面
• 不同浏览器中的页面
• 不同域名下的页面