前端保存数据的几种方式

主要用于在客户端保存信息，以便在不同页面或会话之间使用。常见的前端存储方式包括：

1、Cookie：

存储大小：约4KB

生命周期：可设置过期时间，否则关闭浏览器后失效（会话Cookie）

与服务器通信：每次请求都会携带在HTTP头中

用途：常用于会话管理、用户登录状态等

javascript 复制代码

// 设置
document.cookie = "username=john; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取
const cookies = document.cookie;

2、Web Storage：
2.1 localStorage：

存储大小：约5MB（不同浏览器可能不同）

生命周期：永久存储，除非手动删除

仅在客户端存储，不随HTTP请求发送

用途：长期存储数据，如用户偏好设置

javascript 复制代码

// 存储
localStorage.setItem('key', 'value');
// 读取
let data = localStorage.getItem('key');
// 删除
localStorage.removeItem('key');
// 清空
localStorage.clear();

2.2 sessionStorage：

存储大小：约5MB

生命周期：仅在当前标签页有效，关闭标签页后删除

同样仅在客户端存储

用途：临时存储同一标签页的数据

javascript 复制代码

// 存储
sessionStorage.setItem('key', 'value');

// 读取
const data = sessionStorage.getItem('key');

// 删除
sessionStorage.removeItem('key');

// 清空
sessionStorage.clear();

3、IndexedDB：

存储大小：通常不少于250MB，甚至更大

生命周期：永久存储，除非手动删除

是一个事务型数据库系统，支持索引、游标等

用途：存储大量结构化数据，适合离线应用

javascript 复制代码

// 打开数据库
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['store'], 'readwrite');
  const store = transaction.objectStore('store');
  
  // 添加数据
  store.add({ id: 1, name: 'John' });
};

4、方案对比

|--------|------------|------------------|--------------------|---------------|
| 特性 | Cookie | localStorage | sessionStorage | IndexedDB |
| 容量 | ~4KB | 5-10MB | 5-10MB | 250MB+ |
| 持久性 | 可设置过期时间 | 永久 | 标签页内 | 永久 |
| 服务器通信 | 自动 | 否 | 否 | 否 |
| 数据结构 | 字符串 | 字符串 | 字符串 | 对象 |
| 异步 | 否 | 否 | 否 | 是 |