客户端中的几种存储机制
在前端开发中,浏览器提供了多种存储机制,用于在客户端保存数据。

Cookies
Cookies 是最早的客户端存储机制,由 Netscape 公司在 1994 年提出,用于在客户端存储少量数据,如会话 ID 或用户偏好。
使用场景: 存储会话 ID、用户偏好等。
document.cookie = "key=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
const cookies = document.cookie; // 获取所有 cookiesLocal Storage & Session Storage
Local Storage 和 Session Storage 是 HTML5 标准的一部分,于 2009 年正式提出。它们提供了比 Cookies 更简单、容量更大的客户端存储方式。
Local Storage
持久化存储数据,数据不会随页面关闭而消失。
使用场景: 存储用户偏好设置、登录状态等需要长期保存的数据。
localStorage.setItem("key", "value"); // 存储数据
const value = localStorage.getItem("key"); // 获取数据
localStorage.removeItem("key"); // 删除数据
localStorage.clear(); // 清除所有数据Session Storage
会话级别的存储,数据在页面会话结束时(关闭页面或浏览器)被清除。
使用场景: 存储临时数据,如表单数据、页面状态等。
sessionStorage.setItem("key", "value"); // 存储数据
const value = sessionStorage.getItem("key"); // 获取数据
sessionStorage.removeItem("key"); // 删除数据
sessionStorage.clear(); // 清除所有数据IndexedDB
IndexedDB 是 HTML5 标准的一部分,于 2010 年提出。它是一个低级 API,用于在客户端存储大量结构化数据,适合复杂应用场景。
使用场景: 存储大量数据,如离线应用数据、复杂数据结构等。
const request = indexedDB.open("MyDatabase", 1);
request.onupgradeneeded = function (event) {
const db = event.target.result;
const store = db.createObjectStore("MyObjectStore", { keyPath: "id" });
};
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("MyObjectStore", "readwrite");
const store = transaction.objectStore("MyObjectStore");
store.add({ id: 1, name: "John" });
};Cache Storage
Cache Storage 是 Service Worker API 的一部分,于 2014 年提出。它用于缓存网络请求的响应,支持离线访问和渐进式 Web 应用(PWA)。
使用场景: 渐进式 Web 应用(PWA)中用于缓存资源。
caches.open("my-cache").then(function (cache) {
cache.add("/path/to/resource");
});Extension Storage
Extension Storage 是浏览器扩展 API 的一部分,于 2015 年左右提出。它为浏览器扩展程序提供了专用的存储机制。
使用场景: 存储扩展程序的配置、用户数据等。
操作方法: 依赖于浏览器扩展 API。
Storage Buckets
Storage Buckets 是较新的存储管理机制,于 2020 年左右提出。它提供了更细粒度的存储管理,支持数据隔离和生命周期控制。
使用场景: 需要隔离存储数据的场景。
操作方法: 依赖于浏览器实现。
Private State Tokens
Private State Tokens 是隐私保护技术的一部分,于 2021 年提出。它用于防止跨站跟踪和保护用户隐私。
使用场景: 用于防止跨站跟踪和保护用户隐私。
操作方法: 依赖于浏览器实现。
Interest Groups & Shared Storage
Interest Groups 和 Shared Storage 是隐私沙盒(Privacy Sandbox)的一部分,于 2021 年提出。它们用于广告定向和跨站点数据共享,同时保护用户隐私。
Interest Groups
用于广告定向和用户兴趣分组。
使用场景: 广告技术中用于定向广告投放。
操作方法: 依赖于浏览器实现。
Shared Storage
用于跨站点共享数据。
使用场景: 广告技术、跨站点用户行为分析等。
操作方法: 依赖于浏览器实现。
