Web Storage适合客户端存储因其容量大、不干扰网络通信、操作简洁、同源隔离明确；localStorage长期保存，sessionStorage仅限单标签页临时使用。
Web Storage 是 HTML5 提供的一套客户端本地存储机制，用于在浏览器中以键值对（key/value）形式保存数据。它不参与网络请求，不自动发送给服务器，只在前端运行时读写，因此比 Cookie 更轻量、更高效。
为什么 Web Storage 适合客户端存储
它解决了传统 Cookie 的几个关键短板：
- 容量更大：Cookie 限制约 4KB，而 localStorage 和 sessionStorage 通常支持 5MB 左右（不同浏览器略有差异），足够存用户偏好、表单草稿、离线数据等
- 不干扰网络通信：Cookie 会随每次 HTTP 请求自动携带，增加带宽开销；Web Storage 完全由 JS 控制，数据只留在本地，不影响请求头大小
- 操作更简洁：统一提供 setItem、getItem、removeItem、clear 四个方法，语义清晰，无需解析字符串或处理过期逻辑
- 同源隔离明确：严格遵循协议 + 域名 + 端口的同源策略，避免跨域误读，安全性比手动管理 Cookie 字符串更可控
localStorage 和 sessionStorage 各自的适用场景
两者 API 完全一致，区别主要在生命周期和作用域，这决定了它们在客户端存储中的分工：
- localStorage：数据长期保留，关闭浏览器甚至重启设备后仍在。适合存用户主题设置、登录态标记（配合 token 使用）、历史搜索记录等需要跨会话复用的信息
- sessionStorage：数据绑定到单个标签页，关闭该页即销毁。适合临时状态，比如多步骤表单的中间数据、页面内导航参数、防重复提交的 nonce 标记等，天然避免跨标签页干扰
它们不是万能的，使用时要注意
虽然方便，但 Web Storage 有明确边界：
立即学习“Java免费学习笔记（深入）”；
- 仅限字符串：所有值都会被转为字符串存储，存对象需 JSON.stringify，取时要 JSON.parse
- 同步阻塞：读写是同步操作，大量数据频繁读写可能影响主线程性能
- 无自动过期：localStorage 没有内置过期机制，需业务层自行判断时间戳或版本号来清理旧数据
- 不可跨域共享：即使同一域名下的子域，若端口或协议不同（如 http vs https），也无法访问彼此的存储
