HTML5 Web Storage：如何用本地存储替代 Cookies

Cookies 的限制与问题

在 HTML5 之前，Cookies 是前端开发中最常用的客户端存储方式。Cookies 是存储在客户端浏览器中的小型文本数据，通常用于保存用户身份、跟踪用户行为以及保存用户的设置。但 Cookies 也有一些明显的局限性：

• 存储容量有限：每个 Cookie 的最大存储大小约为 4KB。虽然可以设置多个 Cookie，但仍然有限制。
• 性能问题：每次 HTTP 请求都会自动发送所有相关的 Cookies，增加了请求的大小，可能影响性能。
• 安全性问题：Cookies 存储的敏感数据可能会被盗取或篡改，尤其是在没有适当加密的情况下。
• 同源策略限制：Cookies 的作用范围通常只限于同源网站，这可能限制了跨域数据共享的需求。

HTML5 Web Storage 介绍

2.1 Web Storage 的两种类型

HTML5 Web Storage 提供了两种不同的存储机制：localStorage 和 sessionStorage。

localStorage

• 持久化存储：数据会一直保存在浏览器中，除非被显式删除或者浏览器清除缓存。
• 跨页面访问：同一域名下的所有页面都能访问 localStorage 中的数据。
• 没有过期时间：数据不会自动过期，直到开发者手动删除。

sessionStorage

• 会话存储：数据只会在一个会话期间存在。浏览器关闭后，sessionStorage 中的数据会被清除。
• 同一窗口或标签页：sessionStorage 数据只在当前窗口或标签页有效，不同的标签页或浏览器窗口中的 sessionStorage 数据互不影响。

2.2 使用 Web Storage API

Web Storage 提供了一些简单的 API 来操作存储数据。常见的操作包括设置、获取、删除和清除数据。

设置数据

// 存储数据
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionId', '123456');

获取数据

// 获取数据
const username = localStorage.getItem('username');
const sessionId = sessionStorage.getItem('sessionId');

删除数据

// 删除单个数据项
localStorage.removeItem('username');
sessionStorage.removeItem('sessionId');

清空所有数据

// 清空所有数据
localStorage.clear();
sessionStorage.clear();

Web Storage vs Cookies

Web Storage 与 Cookies 各有优劣，选择合适的存储方式需要根据具体的需求来决定。下面是两者的对比：