当前位置：首页 > news >正文

浏览器存储

news 2025/9/5 9:11:23

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

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

存储方式	说明	容量	生命周期	作用域	是否同步	适合场景
LocalStorage	持久化的本地键值存储	~5~10MB	永久（除非手动删除）	同源（协议+域名+端口）	✅ 同步	用户偏好、主题、记住登录状态等
SessionStorage	会话级别的键值存储	~5~10MB	标签页关闭后失效	当前标签页（同源）	✅ 同步	单页会话数据，如表单草稿、临时筛选条件
IndexedDB	浏览器中的非关系型数据库	较大（几百MB甚至更多）	永久或手动清除	同源	❌ 异步	大量结构化数据、离线缓存、复杂查询
Cookies	小型键值数据，随 HTTP 请求发送	4KB 左右	可设置过期时间	可跨会话 / 跨域（视 Domain 设置）	✅ 同步	身份验证（如 Session ID）、跟踪、CORS 相关
Cache API	用于缓存网络请求和响应	较大	永久或手动管理	同源	❌ 异步	Service Worker 离线缓存、资源缓存
Web SQL（已废弃）	基于 SQLite 的数据库 API（不推荐）	-	-	-	-	已淘汰，不建议使用

✅ 推荐重点掌握：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
临时会话数据，标签页级	✅ SessionStorage
大量结构化数据，如收藏、历史记录、离线数据	✅ IndexedDB（或 Dexie.js）
身份验证 Token、小量跨请求数据	✅ Cookies（或 localStorage，但要考虑安全性）
离线缓存、资源缓存、Service Worker 配合	✅ Cache API
不推荐：Web SQL（已废弃）	❌

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

注意事项	说明
同源策略	只有相同协议 + 域名 + 端口的页面才能访问同一份存储
安全性	不要存储敏感信息（如密码、token 明文）。如果使用 Cookie，设置 `HttpOnly`、`Secure`、`SameSite` 属性
隐私模式	某些浏览器隐私模式下可能禁用或限制存储
容量限制	LocalStorage 一般为 5~10MB，不要存过多数据
异步 vs 同步	IndexedDB / Cache API 是异步的，LocalStorage / SessionStorage / Cookies 是同步的
SSR（服务端渲染）问题	如 Next.js 中，不要在服务端调用浏览器 API（如 localStorage），需要做 `typeof window !== 'undefined'` 判断

✅ 五、总结推荐

功能	推荐技术
存储用户偏好 / 主题 / 设置	LocalStorage
临时表单数据 / 页面级状态	SessionStorage
大量本地数据（如收藏夹、离线内容）	IndexedDB（推荐使用 Dexie.js）
身份验证 / Token / 小数据跨请求	Cookies（推荐 js-cookie 库）
离线缓存 / 资源缓存 / PWA	Cache API + Service Worker