Vue基础知识-localStorage 与 sessionStorage
一、完整实战代码
以下代码包含 localStorage 和 sessionStorage 的保存、读取、删除、清空全流程操作，支持字符串和对象存储（解决 Web Storage 仅存字符串的限制）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- F12点击应用选项查看localStorage,sessionStorage。存储大小一般为5MBlocalStorage:1 localStorage不能跨浏览器访问2 数据会永久保存，关闭浏览器再打开仍然可以访问。用户可以清空浏览器缓存来清理3 同一域名下所有标签页 / 窗口共享sessionStorage:1 sessionStorage不能跨浏览器访问2 关闭浏览器，数据消失3 仅当前标签页 / 窗口独立（不同标签页不共享）--><input type="button" onclick="saveData()" value="保存数据到localStorage"/><input type="button" onclick="getData()" value="读取localStorage中的数据"/><input type="button" onclick="delData()" value="删除localStorage中的数据"/><input type="button" onclick="clearData()" value="清空localStorage中的数据"/><hr><input type="button" onclick="saveData2()" value="保存数据到sessionStorage"/><input type="button" onclick="getData2()" value="读取sessionStorage中的数据"/><input type="button" onclick="delData2()" value="删除sessionStorage中的数据"/><input type="button" onclick="clearData2()" value="清空sessionStorage中的数据"/>
</body>
<script>function saveData(){localStorage.setItem('msg','hello')//覆盖localStorage.setItem('msg','hello!')//对象转jsonlocalStorage.setItem('person',JSON.stringify({name:'张三',age:18}))}function getData(){console.log(localStorage.getItem('msg'))console.log(JSON.parse(localStorage.getItem('person')))//json转对象}function delData(){localStorage.removeItem('msg')localStorage.removeItem('person')}function clearData(){localStorage.clear()}
</script>
<script>function saveData2(){sessionStorage.setItem('msg','hello')//覆盖sessionStorage.setItem('msg','hello!')//对象转jsonsessionStorage.setItem('person',JSON.stringify({name:'张三',age:18}))}function getData2(){console.log(sessionStorage.getItem('msg'))console.log(JSON.parse(sessionStorage.getItem('person')))//json转对象}function delData2(){sessionStorage.removeItem('msg')sessionStorage.removeItem('person')}function clearData2(){sessionStorage.clear()}
</script>
</html>二、Web Storage 核心 API 解析
localStorage 和 sessionStorage 共享完全相同的 API 方法，核心是键值对（Key-Value）操作，且仅支持存储字符串类型（对象需通过 JSON 转换）。
| API 方法 | 作用 | 参数说明 | 返回值 |
|---|---|---|---|
setItem(key, value) | 存储键值对 | key：字符串（唯一标识）；value：字符串 | 无返回值 |
getItem(key) | 根据键读取对应值 | key：需读取的键名 | 成功返回字符串，失败返回 null |
removeItem(key) | 根据键删除指定键值对 | key：需删除的键名 | 无返回值 |
clear() | 清空当前存储对象的所有键值对 | 无参数 | 无返回值 |
key(index) | 根据索引获取对应键名（较少用） | index：数字（0 开始的索引） | 返回对应索引的键名 |
关键注意点：
- 数据类型限制：Web Storage 仅支持字符串存储，若要存储对象 / 数组，需用
JSON.stringify()转为字符串，读取时用JSON.parse()解析回原类型。 - 键名覆盖：若存储相同键名的新值，旧值会被覆盖（如代码中
localStorage.setItem('msg', ...)两次调用）。 null处理：若键不存在，getItem(key)会返回null，直接对null用JSON.parse()会报错，需加判断（如代码中userStr ? JSON.parse(userStr) : null）。
三、localStorage 与 sessionStorage 核心差异
两者用法完全一致，但生命周期、作用范围有本质区别，这是选择使用的核心依据。
| 对比维度 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 永久存储（除非手动删除或清除浏览器缓存） | 会话存储（关闭标签页 / 浏览器后自动删除） |
| 作用范围 | 同一域名下所有标签页 / 窗口共享 | 仅当前标签页 / 窗口独立（不同标签页不共享） |
| 存储大小 | 约 5MB（各浏览器略有差异） | 约 5MB（与 localStorage 一致） |
| 跨浏览器访问 | 不支持（Chrome 存储的数据，Firefox 无法读取） | 不支持（同 localStorage） |
| 刷新页面 | 数据保留 | 数据保留（仅关闭标签页 / 浏览器才丢失） |
直观示例：
- 用
localStorage存数据后，打开同一域名的新标签页，仍能读取到数据； - 用
sessionStorage存数据后，打开新标签页读取，会返回null（不同标签页独立）。
四、实际开发场景
1. localStorage 适用场景
适合存储长期有效、跨页面共享的数据：
- 用户偏好设置：如主题颜色（深色 / 浅色）、字体大小、语言选择；
- 登录状态（非敏感）：如 “记住我” 功能（存储非敏感的 Token 或用户 ID，注意：敏感信息需加密）；
- 本地缓存：如接口返回的静态数据（商品分类、地区列表），减少重复请求。
示例代码（存储用户主题）：
// 保存主题设置
localStorage.setItem('theme', 'dark');// 页面加载时读取主题
window.onload = () => {const theme = localStorage.getItem('theme') || 'light';document.body.className = theme; // 应用主题
};
2. sessionStorage 适用场景
适合存储临时有效、仅当前会话使用的数据：
- 临时表单内容：如用户填写一半的表单（防止刷新页面丢失）；
- 会话级 Token：如临时登录凭证（关闭页面后无需保留）；
- 页面间临时传递数据：如从列表页跳转到详情页，传递临时参数（无需永久存储）。
示例代码（临时保存表单）：
// 监听表单输入，实时保存到 sessionStorage
const form = document.querySelector('#myForm');
form.addEventListener('input', (e) => {const formData = {username: form.username.value,email: form.email.value};sessionStorage.setItem('tempFormData', JSON.stringify(formData));
});// 页面加载时恢复表单
window.onload = () => {const tempData = sessionStorage.getItem('tempFormData');if (tempData) {const formData = JSON.parse(tempData);form.username.value = formData.username;form.email.value = formData.email;}
};
五、注意事项
1. 存储大小限制
- 单个域名下 Web Storage 总大小约 5MB，超过会抛出
QuotaExceededError错误； - 避免存储大量数据（如 base64 图片），建议仅存少量配置、临时参数。
2. 安全性问题
- 不存储敏感信息：Web Storage 存储的是明文数据，任何人可通过 F12 查看 / 修改，严禁存储密码、银行卡号等敏感信息；
- 敏感数据加密：若需存储 Token 等非极敏感信息，建议先通过简单加密（如 Base64 或自定义算法）再存储。
3. 浏览器兼容性
- 支持所有现代浏览器（Chrome、Firefox、Edge、Safari），以及 IE 8+；
- 若需兼容更老浏览器（如 IE7-），需用 Cookie 替代（但 Cookie 仅 4KB 大小，且每次请求会携带）。
4. 数据持久化风险
localStorage数据会被用户手动清除（如浏览器 “清除浏览数据” 功能），需做好数据丢失后的降级处理；- 不同浏览器的隐私模式可能限制 Web Storage 使用（如 Safari 隐私模式下
localStorage会失效），需加异常捕获。
六、总结
- 若数据需长期保留、跨页面共享 → 用
localStorage； - 若数据仅当前会话使用、关闭页面即丢 → 用
sessionStorage。