JS本地storage存储有哪些实用操作技巧

JS本地storage存储包含localStorage和sessionStorage两种类型，前者存储的数据永久有效除非手动删除，后者仅在当前浏览器标签页会话期间有效，关闭标签页后数据会自动清除。两者都遵循同源策略，只能访问同域名下的存储数据。

基础操作技巧

存储与读取数据

localStorage和sessionStorage的操作API完全一致，仅对象名不同，基础存储读取代码如下：

// 存储字符串数据到localStorage
localStorage.setItem('username', '张三');
// 读取存储的数据
const username = localStorage.getItem('username');
console.log(username); // 输出：张三

// 使用sessionStorage存储临时数据
sessionStorage.setItem('temp_token', 'abc123');
const tempToken = sessionStorage.getItem('temp_token');
console.log(tempToken); // 输出：abc123

删除与清空数据

可以删除单个指定键的数据，也可以清空当前域名下的所有存储数据：

// 删除localStorage中指定键的数据
localStorage.removeItem('username');
// 清空当前域名下所有localStorage数据
localStorage.clear();

// 删除sessionStorage中指定键的数据
sessionStorage.removeItem('temp_token');
// 清空当前域名下所有sessionStorage数据
sessionStorage.clear();

进阶操作技巧

存储复杂数据类型

localStorage和sessionStorage只能存储字符串类型的数据，如果要存储对象、数组等复杂类型，需要先使用JSON.stringify()序列化，读取时再用JSON.parse()反序列化：

// 存储对象数据
const user = {
  id: 1,
  name: '李四',
  age: 25
};
localStorage.setItem('user_info', JSON.stringify(user));

// 读取并反序列化对象数据
const storedUser = JSON.parse(localStorage.getItem('user_info'));
console.log(storedUser.name); // 输出：李四

监听存储变化

当同源页面的localStorage数据发生变化时，会触发storage事件，可以通过监听该事件实现多标签页数据同步：

// 监听storage变化
window.addEventListener('storage', function(event) {
  console.log('变化的键：', event.key);
  console.log('旧值：', event.oldValue);
  console.log('新值：', event.newValue);
  console.log('发生变化的页面域名：', event.url);
});

处理存储超限问题

localStorage的存储容量一般为5MB左右，超过容量会抛出QuotaExceededError错误，可以通过try-catch捕获错误并处理：

try {
  // 尝试存储大量数据
  const largeData = new Array(1024 * 1024).join('a');
  localStorage.setItem('large_data', largeData);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.log('本地存储容量已满，请清理无用数据后重试');
    // 可以在这里执行数据清理逻辑
    localStorage.removeItem('old_useless_data');
  }
}

安全与注意事项

本地storage存储的数据可以被用户直接修改，不要存储敏感信息如用户密码、支付密钥等。如果需要存储登录态相关信息，建议设置过期时间，避免数据长期有效带来安全风险：

// 带过期时间的存储封装
function setStorageWithExpire(key, value, expireMs) {
  const data = {
    value: value,
    expire: Date.now() + expireMs
  };
  localStorage.setItem(key, JSON.stringify(data));
}

// 读取时校验过期时间
function getStorageWithExpire(key) {
  const stored = localStorage.getItem(key);
  if (!stored) return null;
  const data = JSON.parse(stored);
  if (Date.now() > data.expire) {
    localStorage.removeItem(key);
    return null;
  }
  return data.value;
}

// 使用示例：存储数据1小时后过期
setStorageWithExpire('login_token', 'xyz789', 3600 * 1000);
const token = getStorageWithExpire('login_token');
console.log(token); // 1小时内输出xyz789，超时后输出null

两种存储类型的选择建议

如果数据需要长期保存，比如用户偏好设置、历史浏览记录等，选择localStorage；如果是临时会话数据，比如单次表单填写内容、临时登录凭证等，选择sessionStorage。同时要注意，不要在storage中存储过大的数据，避免影响页面性能。

localStoragesessionStorageJavaScript_storage前端本地存储修改时间：2026-06-08 10:56:30