​浏览器存储

🧠 一、常见的浏览器存储方式有哪些？

浏览器提供了几种主要的存储机制，适用于不同的场景：

✅ ​推荐重点掌握：LocalStorage、SessionStorage、IndexedDB、Cookies​

💾 二、各种存储方式详解及使用

1. 📦 LocalStorage（本地存储）

​特点：​​

• 永久存储（除非用户手动清除或代码删除）
• 存储简单的键值对（字符串）
• 同源下所有标签页共享
• 容量：约 5~10MB

​基本用法：​​ 

// 存数据（必须字符串）
localStorage.setItem('username', 'Alice');

// 取数据
const user = localStorage.getItem('username'); // 'Alice'

// 删除某个数据
localStorage.removeItem('username');

// 清空所有 localStorage
localStorage.clear();

​存储对象（需 JSON 序列化）：​​ 

const user = { name: 'Bob', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 读取
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Bob

​适用场景：​​

• 用户主题设置（深色/浅色模式）
• 用户偏好（语言、通知开关）
• 记住我（简单 token 或标识）
• 缓存少量静态数据

2. 🧳 SessionStorage（会话存储）

​特点：​​

• 仅在当前浏览器标签页有效
• 标签页关闭后数据自动清除
• 不能跨标签页共享
• 其他方面和 LocalStorage 几乎一样

​基本用法：​​ 

sessionStorage.setItem('tempData', '12345');
const data = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');

​适用场景：​​

• 表单填写中途的临时保存
• 单页应用（SPA）内的临时状态
• 不需要长期保存的会话数据

3. 🗃️ IndexedDB（索引数据库）

​特点：​​

• 浏览器内置的非关系型数据库（NoSQL）
• 支持存储大量结构化数据（比如数组、对象、文件等）
• 异步操作（推荐使用 async/await 或 Promise）
• 适合复杂查询、离线数据、大量缓存

​基本特点：​​

• 容量：一般几十 MB 到几百 MB，甚至更多（视浏览器和硬盘空间而定）
• 不适合直接操作，推荐使用封装库，如：
  • Dexie.js（简单易用，强烈推荐！）
  • localForage（简化异步存储，自动降级到 IndexedDB / WebSQL / localStorage）

​使用 Dexie.js 的简单示例：​​ 

npm install dexie

// db.js
import Dexie from 'dexie';

const db = new Dexie('MyVideoDB');

db.version(1).stores({
  videos: '++id, title, url, watched'
});

export default db;

// 使用
import db from './db';

// 添加视频
await db.videos.add({ title: '视频1', url: 'http://example.com/1.mp4', watched: false });

// 查询所有视频
const allVideos = await db.videos.toArray();
console.log(allVideos);

​适用场景：​​

• 离线 Web 应用（PWA）
• 大量本地数据（如笔记、收藏、历史记录）
• 需要查询、排序、分页等操作的复杂数据

4. 🍪 Cookies（小甜饼）

​特点：​​

• 存储少量数据（通常不超过 4KB）
• 可设置过期时间（会话 Cookie / 持久 Cookie）
• 每次 HTTP 请求都会自动携带（用于身份验证等）
• 可以设置作用域（Domain / Path）
• 通常用于身份验证、用户跟踪

​基本用法（原生 JS）：​​ 

// 设置 cookie（简单方式，不推荐用于生产）
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取（需自己解析）
console.log(document.cookie); // "username=John; otherKey=value..."

// 删除 cookie（设置过期时间为过去）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

​推荐使用库来操作 Cookie，比如：​​

• js-cookie 

npm install js-cookie

import Cookies from 'js-cookie';

// 设置
Cookies.set('token', 'abc123', { expires: 7 }); // 7天后过期

// 读取
const token = Cookies.get('token');

// 删除
Cookies.remove('token');

​适用场景：​​

• 用户登录态（Token / Session ID）
• 跨页面身份识别
• 第三方跟踪与广告（谨慎使用！）

5. 📦 Cache API（缓存 API，常配合 Service Worker）

​特点：​​

• 用来缓存网络请求和响应（如 HTML、JS、图片等）
• 一般与 Service Worker 一起使用，实现 PWA 离线功能
• 异步操作

​简单示例：​​ 

// 打开一个缓存
caches.open('my-cache').then(cache => {
  // 添加请求和响应到缓存
  cache.addAll([
    '/index.html',
    '/styles.css',
    '/app.js'
  ]);
});

​适用场景：​​

• 离线 Web 应用（PWA）
• 加速重复访问（缓存静态资源）
• 资源版本管理

🧩 三、如何选择合适的存储方式？

⚠️ 四、浏览器存储的注意事项

✅ 五、总结推荐

🎁 六、额外建议

• ​不要滥用 LocalStorage 存敏感信息​
• ​复杂对象要序列化（JSON.stringify）后才能存​
• ​考虑封装统一的存储工具函数，便于维护​
• ​对于大型应用，推荐使用状态管理（如 Redux、Zustand） + 持久化插件，结合 LocalStorage 实现状态持久化