sessionStorage，localStorage 和 cookie 的一些异同

sessionStorage localStorage 和 cookie 是前端常用的三种本地数据存储工具，它们之间有些相同点也有些不同点，尤其 sessionStorage 有些需要特别注意的地方。

相同点

• 都将数据存储在本地
• 存储空间大小都受限制且通常无法自定义在磁盘上的存储位置
• 存储的数据都需要先序列化成字符串形式
• 都支持随时读取和修改存储的数据(HttpOnly 的 cookie 除外)
• 都受同源策略限制
• 对数据的读写操作都是同步的，会阻塞主线程。

Cache Storage API 和 IndexedDB 则是异步的，不会阻塞主线程。

不同点

• cookie 会随请求在 服务器/客户端 之间往返，sessionStorage 和 localStorage 存储的数据都只在本地。
• cookie 存储的数据可明确指定过期时间，sessionStorage 存储的数据只在该次会话期间可用，localStorage 存储的数据则需要手动管理其生存周期。
• cookie 可用的存储空间很小，通常只有 4kb。sessionStorage 和 localStorage 可用的存储空间一般有 5MB。

现代浏览器会根据磁盘剩余空间在必要时自动扩充 Cache Storage API 和 IndexedDB 可用的存储空间，从数百 MB 到数百 GB 甚至更多。

sessionStorage 需要特别注意的点

• 每个浏览器 Tab 都算一个独立会话
• 推出浏览器再打开浏览器后自动恢复的 Tab 也算一个新的会话

也就是说，sessionStorage 存储的数据在你打开的新 Tab 页，或者关掉浏览器再重新打开的情况下，都会失效。