vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue.js localStorage 与 sessionStorage

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

作者：Rysxt

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

一、核心概念与特性对比

1.1 生命周期与作用域

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

1.2 数据类型限制

// 存储对象示例
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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文