Vue基础知识-localStorage 与 sessionStorage

给月亮点灯398

731人浏览 · 2025-09-02 20:26:55

给月亮点灯398 · 2025-09-02 20:26:55 发布

一、完整实战代码

以下代码包含 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。存储大小一般为5MB
        localStorage:
            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!')
        //对象转json
        localStorage.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!')
        //对象转json
        sessionStorage.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;
  }
};