【localstorage、sessionStorage和cookie】

---

前言

在实际前端开发中，数据存储是非常重要的。无论是保存用户登录状态、缓存接口数据，还是实现个性化设置，我们都需要选择合适的存储方案。常见的浏览器端存储方式包括 localStorage、sessionStorage 和 Cookie，它们各有优缺点，适用于不同的场景。

本文将结合实际开发，简单介绍这三种存储方式

---

一、localStorage (长期存储)

LocalStorage是Web存储API的一部分，它允许网站在用户的浏览器中存储键值对数据。与sessionStorage不同，存储在LocalStorage中的数据没有过期时间，即使浏览器关闭后数据依然会保留，直到被明确地删除。

localstorage 只能存储字符串
如果存储对象需要将对象转为json格式字符串
读取的时候，需要json解析

典型场景：

• 用户主题偏好（深色/浅色模式）
• 离线缓存（如接口数据）
• 购物车数据（未登录用户暂存）

在浏览器查看位置 （F12 打开控制台）

存储

localStorage.setItem(key, value)
其中 key,value 都是字符串类型

如果要存储对象，需要先将对象 转换为 json字符串形式，使用的时候 再 还原

localStorage.setItem('person', JSON.stringify({ name: '星星', charact: '小性子' }))

JSON.stringify({}) 将对象转换成string

典型场景：

• 用户主题偏好（深色/浅色模式）
• 离线缓存（如接口数据）
• 购物车数据（未登录用户暂存）

Vue 3 示例（Composition API）：

import { ref, watch } from "vue";const theme = ref(localStorage.getItem("theme") || "light");watch(theme, (newVal) => {localStorage.setItem("theme", newVal);
});例如：
```javascript
localStorage.setItem('name','星星')

读取

localStorage.getItem(key) 如果键不存在，将返回null

例如：

const res = localStorage.getItem('name');
console.log(res);

如果要读取json字符串，要将json字符串，还原成json对象

JSON.parse(localStorage.getItem('person') || {})

删除

localStorage.removeItem(key) 删除key中的数据
也可以清除所有数据 localStorage.clear()

localStorage.removeItem('name');//删除 name 相关的存储
localStorage.clear(); //清空所有存储

注意事项：

• 不能跨域共享（https://a.com 无法访问 https://b.com 的存储）。
• 存储大量数据可能影响性能（建议结合 IndexedDB）。

如果想了解存储复杂类型，请移步localStorage设置存活时间，存储迭代器

---

二、sessionStorage (会话存储)

sessionStorage 是 HTML5 新增的一种会话存储对象，用于在同一窗口或标签页中临时保存数据。当关闭窗口或标签页时，sessionStorage 里面的数据在页面会话结束时会被清除。

在浏览器查看位置

典型场景：

• 表单草稿（页面刷新后恢复）
• 单页应用（SPA）路由状态保持
• 敏感数据短期存储（比 localStorage 更安全）

Vue 2/3 示例：

// 保存表单数据
sessionStorage.setItem("draftForm", JSON.stringify({ name: "Alice", age: 25 }));// 恢复数据
const draft = JSON.parse(sessionStorage.getItem("draftForm"));

1.存储

sessionStorage.setItem("key", "value");
sessionStorage也仅能存储字符串，存储方式和 localStorage类型。

sessionStorage.setItem('name','初一')

sessionStorage存储对象

sessionStorage.setItem('person', JSON.stringify({ name: '星星', charact: '小性子' }))

2.读取数据

sessionStorage.getItem('key')

代码如下（示例）：

 sessionStorage.getItem('name')

sessionStorage读取对象和存储对象的方式一样，都是需要先将对象通过json.Stringfy({}) 转换成json 字符串，之后 使用JSON.parse() 将字符串还原成对象。
这里就不做赘述了。

3. 删除数据

• 从 sessionStorage 删除key对应的值
  sessionStorage.removeItem("key")

• 删除所有保存的数据
  sessionStorage.clear();

sessionStorage.removeItem('name');

注意事项：

• 标签页独立（不同标签页的 sessionStorage 不共享）。
• SPA 路由跳转不会清除（仅关闭标签页时失效）。

---

Cookie

适合服务端交互

cookie存储，一次只能存储一条数据。可以存储多个信息

浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。

典型场景：

• 用户登录状态（JWT Token）
• CSRF 防护（SameSite 策略）
• A/B 测试（服务端渲染时读取）

Vue/React 示例：

// 设置 Cookie（需自行封装或使用 js-cookie）
document.cookie = "token=abc123; expires=Fri, 16 Dec 2025 23:59:59 GMT; path=/; Secure";// 读取 Cookie（需解析）
const token = document.cookie.split(';').find(c => c.trim().startsWith('token='))?.split('=')[1];

存储cookie

cookie有多个参数

• path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

// path 是路径，该cookie被存储在哪个路径下可以被访问
document.cookie = "username=陆言;path=/localstorage"；
document.cookie = "sex=omega"// 过期事件设置 expires
const data = new Data();
data.setMinutes(data.getMinutes() + 1)//设置时间范围是一分钟
// toUTCString() 转换为utc时间，正常我们获取到的时间是东八区时间，比utc快8小时，所以 需要 -8小时 或转换成utc时间
document.cookie = `age=23;expires=${data.toUTCString()}`

path 存储域名 对应浏览器信息中path，该cookie被存储在哪个域名下可以被访问
规则是，内部可以看到外部，外部看不到内部

如 path=/localstorage/cup和path=/localstorage
存在cup下的cookie只有在 cup的域名下被看到。cup可以看到localstorage下存储的cookie

读取cookie

console.log(document.cookie)

修改

同名的cookie会被覆盖,相当于更新

document.cookie = "username=天涯";// 修改 
document.cookie = "username=明月"
console.log(document.cookie)//username=明月

删除

重新已经存在的cookie 利用覆盖属性
设置 expires过期时间 时间在当前时间之前 则视为删除

当 Cookie 的过期时间（ Expires）被设定时，设定的日期和时间只与客户端相关，而不是服务端。

const date = new Date()
date.setM(date.getMinutes() - 1)
document.cookie = `username=112; expires=${date.toUTCString()}`
document.cookie = `age=112; expires=${date.toUTCString()}`
document.cookie = `gender=112; expires=${date.toUTCString()}`
console.log(document.cookie)

注意事项：

• 尽量设置 HttpOnly 和 Secure（防止 XSS 攻击）。
• 避免存储敏感数据（如密码），优先用 localStorage + 加密。

核心区别对比

特性	Cookie	localStorage	sessionStorage
存储大小	4KB 左右（不同浏览器不同）	5MB 或更大	5MB 或更大
生命周期	可设置过期时间（默认会话级）	永久存储（除非手动清除）	页面会话期间有效（标签页关闭失效）
是否自动携带	是（每次 HTTP 请求都会发送）	否	否
访问权限	同源（可设置 domain/path）	同源	同源（仅当前标签页）
适用场景	用户认证（Token）、服务端交互	长期缓存（如主题设置）	临时数据（如表单草稿）

安全性与最佳实践

（1）避免 XSS 攻击

• Cookie：设置 HttpOnly 和 Secure。
• localStorage/sessionStorage：不要存敏感信息（如密码）。

（2）数据加密

// 简单加密（实际项目用 crypto-js/AES）
const encryptedData = btoa(JSON.stringify(data));
localStorage.setItem("secureData", encryptedData);// 解密
const rawData = JSON.parse(atob(localStorage.getItem("secureData")));

（3）存储事件监听（跨标签页通信）

// 监听 localStorage 变化（适用于多标签页同步）
window.addEventListener("storage", (e) => {if (e.key === "theme") {console.log("主题已更新：", e.newValue);}
});

---

总结

存储方式	何时使用？	何时避免？
Cookie	需要服务端交互（如 JWT 认证）	存储大量数据（4KB 限制）
localStorage	长期缓存（如用户设置）	敏感数据（易被 XSS 攻击）
sessionStorage	临时数据（如表单草稿）	需要跨标签页共享的数据

最终推荐：

• 登录状态 → Cookie（HttpOnly + Secure）
• 用户偏好 → localStorage
• 临时数据 → sessionStorage
• 大数据 → IndexedDB

---

推荐阅读

• MDN Web Storage API
• Cookie 的 SameSite 属性
• 前端安全：XSS 与 CSRF 防护