脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js localStorage 与 sessionStorage

Vue.js 中 LocalStorage 与 SessionStorage操作示例最佳实践

 更新时间：2026年01月09日 09:19:18   作者：Rysxt  
文章介绍了LocalStorage和SessionStorage的区别,包括生命周期、作用域、数据类型限制、基础操作和进阶应用场景,同时,还讨论了最佳实践、注意事项和常见错误及其解决方案,感兴趣的朋友跟随小编一起看看吧

一、核心概念与特性对比

1.1 生命周期与作用域

特性LocalStorageSessionStorage对比说明
​​生命周期​​永久存储（浏览器关闭后仍存在）会话级存储（标签页关闭即清除）LocalStorage 跨会话有效
​​数据共享范围​​同源所有窗口/标签页共享仅当前标签页有效不同标签页无法共享数据
​​典型存储容量​​5-10MB（浏览器差异）5-10MB（与LocalStorage相同）均适合中小型数据存储
​​数据可见性​​可通过浏览器开发者工具查看同左敏感数据需加密处理

1.2 数据类型限制

  • ​​存储格式​​：仅支持字符串类型
  • ​​复杂数据处理​​：需通过 JSON.stringify()/JSON.parse() 转换
// 存储对象示例
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));

二、基础操作指南

2.1 核心 API 对比

方法LocalStorageSessionStorage适用场景
setItem(key, value)永久存储键值对当前会话存储需长期保存的用户偏好设置
getItem(key)读取永久数据读取会话数据获取主题配置等持久化信息
removeItem(key)删除永久数据删除会话数据清除用户登录状态
clear()清空所有永久数据清空当前会话数据重置应用配置

2.2 完整操作示例

// 存储数据（自动序列化）
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cart', JSON.stringify([{id:1,name:'商品A'}]));
// 读取数据（自动反序列化）
const currentTheme = localStorage.getItem('theme') || 'light';
const cartItems = JSON.parse(sessionStorage.getItem('cart')) || [];
// 删除数据
localStorage.removeItem('theme');
sessionStorage.removeItem('cart');
// 清空存储
localStorage.clear();
sessionStorage.clear();

三、进阶应用场景

3.1 表单状态保持（跨页面）

// 在表单组件中
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  mounted() {
    // 恢复上一次输入
    this.formData = JSON.parse(sessionStorage.getItem('formData')) || this.formData;
  },
  watch: {
    formData: {
      handler: 'saveDraft',
      deep: true
    }
  },
  methods: {
    saveDraft() {
      sessionStorage.setItem('formData', JSON.stringify(this.formData));
    }
  }
}

3.2 用户偏好设置管理

// 主题切换实现
const THEME_KEY = 'app_theme';
const DEFAULT_THEME = 'light';
// 获取主题
const getCurrentTheme = () => {
  return localStorage.getItem(THEME_KEY) || DEFAULT_THEME;
}
// 切换主题
const toggleTheme = () => {
  const newTheme = getCurrentTheme() === 'light' ? 'dark' : 'light';
  localStorage.setItem(THEME_KEY, newTheme);
  document.body.className = newTheme;
}
// 初始化主题
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = getCurrentTheme();
  document.body.className = savedTheme;
});

3.3 会话临时数据存储

// 购物车临时存储（仅当前标签页有效）
const CART_KEY = 'shopping_cart';
// 添加商品
const addToCart = (product) => {
  const cart = JSON.parse(sessionStorage.getItem(CART_KEY)) || [];
  cart.push(product);
  sessionStorage.setItem(CART_KEY, JSON.stringify(cart));
}
// 清空临时数据（标签页关闭自动清除）
window.addEventListener('beforeunload', () => {
  sessionStorage.removeItem(CART_KEY);
});

四、最佳实践与注意事项

4.1 数据安全策略

  1. ​​敏感数据加密​​：
import CryptoJS from 'crypto-js';
const SECRET_KEY = 'your-secret-key';
const encrypt = (data) => {
  return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
}
const decrypt = (ciphertext) => {
  const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}
// 存储加密数据
localStorage.setItem('token', encrypt('user_token_123'));
  1. ​​存储容量监控​​：
const checkStorage = (storageType) => {
  try {
    const testData = 'x'.repeat(1024 * 1024); // 1MB测试数据
    let count = 0;
    while(true) {
      storageType.setItem(`test_${count}`, testData);
      count++;
    }
  } catch(e) {
    const usedSpaceMB = (count * 1) / 1024; // 粗略估算已用空间
    console.log(`已使用存储空间：${usedSpaceMB.toFixed(2)}MB`);
    return usedSpaceMB;
  }
}
// 检查LocalStorage剩余空间
checkStorage(localStorage);

4.2 性能优化方案

  1. ​​批量操作优化​​：
// 批量写入优化
const batchWrite = (storage, data) => {
  const transaction = [];
  Object.entries(data).forEach(([key, value]) => {
    transaction.push({ type: 'set', key, value });
  });
  // 模拟批量操作（实际浏览器会自动优化）
  transaction.forEach(({ key, value }) => {
    storage.setItem(key, value);
  });
}
// 使用示例
batchWrite(localStorage, {
  theme: 'dark',
  language: 'zh-CN',
  version: '2.0.1'
});
  1. ​​内存缓存策略​​：
// 双缓存机制（内存+LocalStorage）
const createCache = (storageKey) => {
  let memoryCache = JSON.parse(localStorage.getItem(storageKey)) || {};
  return {
    get: (key) => memoryCache[key],
    set: (key, value) => {
      memoryCache[key] = value;
      localStorage.setItem(storageKey, JSON.stringify(memoryCache));
    }
  }
}
// 使用示例
const userCache = createCache('user_data');
userCache.set('profile', { name: '李四' });
const profile = userCache.get('profile');

五、典型错误与解决方案

5.1 跨域访问问题

// 错误示例：不同域名无法访问
// 在 https://a.com 无法访问 https://b.com 的 localStorage
// 解决方案：使用 postMessage 进行安全通信
window.addEventListener('message', (e) => {
  if (e.origin === 'https://trusted-domain.com') {
    localStorage.setItem('sharedData', e.data);
  }
});

5.2 存储空间不足

// 错误处理示例
try {
  localStorage.setItem('largeData', new Array(10 * 1024 * 1024).fill('x').join(''));
} catch(e) {
  if (e instanceof DOMException && e.code === 22) {
    console.error('存储空间不足，请清理缓存');
    // 自动清理过期数据
    localStorage.removeItem('oldData');
  }
}

5.3 数据类型错误

// 类型校验方案
const safeParse = (data) => {
  try {
    return JSON.parse(data);
  } catch(e) {
    console.error('数据解析失败:', e);
    return null;
  }
}
const userInfo = safeParse(localStorage.getItem('user'));

六、进阶应用案例

6.1 离线应用数据同步

// 离线数据缓存策略
const syncOfflineData = async () => {
  if (!navigator.onLine) {
    // 缓存待提交数据
    const pendingData = getPendingData();
    localStorage.setItem('offlineQueue', JSON.stringify(pendingData));
  } else {
    // 联网时同步数据
    const offlineData = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
    offlineData.forEach(async (item) => {
      await fetch('/api/submit', { method: 'POST', body: JSON.stringify(item) });
    });
    localStorage.removeItem('offlineQueue');
  }
}
// 监听网络状态变化
window.addEventListener('online', syncOfflineData);

6.2 多标签页数据同步

// 使用 BroadcastChannel 实现跨标签页通信
const channel = new BroadcastChannel('storage_sync');
// 监听数据变化
channel.onmessage = (e) => {
  if (e.data.type === 'storage-update') {
    localStorage.setItem(e.data.key, e.data.value);
  }
}
// 修改数据时广播
const setItemWithBroadcast = (key, value) => {
  localStorage.setItem(key, value);
  channel.postMessage({ type: 'storage-update', key, value });
}

通过合理运用 LocalStorage 和 SessionStorage，开发者可以显著提升 Web 应用的用户体验和性能表现。建议根据数据特性选择合适的存储方案，并建立完善的存储管理规范。

到此这篇关于Vue.js 中 LocalStorage 与 SessionStorage 深度实践指南的文章就介绍到这了,更多相关vue.js localStorage 与 sessionStorage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue渲染过程浅析

    Vue渲染过程浅析

    这篇文章主要介绍了Vue渲染过程浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue设计一个倒计时秒杀的组件详解

    vue设计一个倒计时秒杀的组件详解

    这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • webpack如何将vue3单页面应用改造成多页面应用

    webpack如何将vue3单页面应用改造成多页面应用

    这篇文章主要介绍了webpack如何将vue3单页面应用改造成多页面应用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-05-05
  • Vue动态生成表格的行和列

    Vue动态生成表格的行和列

    这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 如何使用Vue3构建一个图像画廊(支持图片上传)

    如何使用Vue3构建一个图像画廊(支持图片上传)

    这篇文章主要给大家介绍了关于如何使用Vue3构建一个图像画廊(支持图片上传)的相关资料,Vue画廊这是vue编写的图库应用程序,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue3中element-plus Upload上传文件代码示例

    vue3中element-plus Upload上传文件代码示例

    这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue自定义可选时间的日历组件

    vue自定义可选时间的日历组件

    这篇文章主要为大家详细介绍了vue自定义可选时间的日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue学习笔记之Vue中css动画原理简单示例

    vue学习笔记之Vue中css动画原理简单示例

    这篇文章主要介绍了vue学习笔记之Vue中css动画原理,结合简单实例形式分析了Vue中css样式变换动画效果实现原理与相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • vue中使用window.open()参数示例详解

    vue中使用window.open()参数示例详解

    这篇文章主要介绍了vue中使用window.open()参数详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • vue打包后出现空白页的原因及解决方式详解

    vue打包后出现空白页的原因及解决方式详解

    在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览,根据官网打包出来的html直接打开是显示空白,下面这篇文章主要给大家介绍了关于vue打包后出现空白页的原因及解决方式的相关资料,需要的朋友可以参考下
    2022-07-07

最新评论