前端常用的浏览器存储方式（Cookie，sessionStorage，localStorage，IndexedDB，Cache Storage，Memory）

前端常用的浏览器存储方式主要有：

1. Cookie
2. sessionStorage
3. localStorage
4. IndexedDB
5. Cache Storage（PWA）
6. Memory（JS变量）

一般网站开发最常用的是前三个。

特性	Cookie	sessionStorage	localStorage	IndexedDB
容量	~4KB	~5MB	~5-10MB	数百MB以上
浏览器关闭后	Session Cookie失效（可设置长期）	清除	保留	保留
页面刷新	保留	保留	保留	保留
同标签页跳转	保留	保留	保留	保留
新标签页共享	✔	✘	✔	✔
同域名页面共享	✔	✘（仅当前Tab）	✔	✔
自动发送给服务器	✔	✘	✘	✘
PHP可直接读取	✔	✘	✘	✘
JS读取	✔	✔	✔	✔
适合存储对象	一般	一般	一般	非常适合
读写性能	较低	高	高	很高
过期时间	可设置	浏览器关闭	永久	永久

---

Cookie

适合：

• 登录状态
• UTM来源
• 推荐人来源
• 需要PHP读取的数据

例如：

document.cookie = "utm_source=google; path=/";

PHP：

echo $_COOKIE['utm_source'];

优点：

• 前后端都能访问
• 可设置过期时间

缺点：

• 每次请求都会发送给服务器
• 容量小

---

sessionStorage

适合：

• 当前访问会话的数据
• 表单临时数据
• 当前页面状态

例如：

sessionStorage.setItem('utm_source', 'google');

特点：

A页面
 ↓
B页面
 ↓
C页面

数据存在

但：

A页面
 ↓
新标签打开B页面

数据不存在

优点：

• 不会发送给服务器
• 自动清理

缺点：

• 新标签页丢失

---

localStorage

适合：

• 用户偏好设置
• 网站主题
• 语言切换
• 长期缓存

例如：

localStorage.setItem('theme', 'dark');

特点：

今天访问
↓
明天访问
↓
下个月访问

仍然存在

除非：

localStorage.clear();

或者用户清理浏览器缓存。

优点：

• 永久保存
• 新标签页共享

缺点：

• PHP读取不到

---

IndexedDB

适合：

• 大量数据
• 离线应用
• PWA
• 商品缓存
• 聊天记录

例如：

indexedDB.open("myDB");

容量远超：

Cookie     4KB
Storage    5MB
IndexedDB  数百MB+

---

实际项目推荐

UTM来源统计

推荐：

Cookie

因为：

$_COOKIE['utm_source']

WordPress表单提交时直接能获取。

---

用户主题颜色

推荐：

localStorage

localStorage.setItem('theme','dark');

---

当前页面筛选条件

推荐：

sessionStorage

例如产品列表：

品牌：Apple
价格：1000-2000
排序：销量

用户刷新页面不丢失，但关闭浏览器后清除。

---

WordPress网站常见选择

场景	推荐
UTM来源	Cookie
WhatsApp来源跟踪	Cookie
Google Ads来源	Cookie
表单来源统计	Cookie
主题切换	localStorage
多语言切换	localStorage
当前页面筛选器	sessionStorage
大量离线数据	IndexedDB

对于你当前这个：

?utm_source=google
?utm_source=linkedin
?utm_source=facebook

然后要把来源写入：

WhatsApp
Email
Form

最佳方案是：

Session Cookie

因为：

• 整个网站都能获取；
• 新标签页也能获取；
• WordPress 后端/PHP 也能获取；
• 关闭浏览器自动失效（如果不设置 expires/max-age）。