如何用JavaScript实现本地存储？

JavaScript本地存储主要使用localStorage和sessionStorage，二者均以字符串键值对形式存储数据，API相同但生命周期不同：localStorage永久保存，sessionStorage仅限当前标签页。

JavaScript 本地存储主要靠 localStorage 和 sessionStorage，它们都以键值对（字符串）形式保存数据，操作简单、无需后端参与，适合存用户偏好、表单草稿、登录状态等轻量信息。

基础写法：存、取、删、清空

两者 API 完全一致，区别只在于生命周期：

• localStorage：数据永久保存，除非手动清除或代码删除
• sessionStorage：仅在当前浏览器标签页有效，关闭标签即丢失

常用方法示例：

// 存储（自动转为字符串）
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cartCount', '3');

// 读取（返回字符串，注意类型）
const theme = localStorage.getItem('theme'); // 'dark'
const count = sessionStorage.getItem('cartCount'); // '3'

// 删除某一项
localStorage.removeItem('theme');

// 清空全部（谨慎使用）
sessionStorage.clear();

注意数据类型：只能存字符串

数字、对象、布尔值等直接存会自动调用 .toString()，导致意外结果：

localStorage.setItem('age', 25);        // 存的是 '25'，没问题
localStorage.setItem('user', {name: 'Tom'}); // 存的是 '[object Object]'

解决办法：存前用 JSON.stringify()，取后用 JSON.parse()：

const user = { name: 'Tom', active: true };
localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
// → { name: 'Tom', active: true }

建议封装一个安全读写函数，自动处理解析失败：

function safeSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.warn('本地存储失败:', e);
  }
}

function safeGet(key, defaultValue = null) {
  try {
    const str = localStorage.getItem(key);
    return str ? JSON.parse(str) : defaultValue;
  } catch (e) {
    return defaultValue;
  }
}

实用技巧：监听变化 & 判断是否可用

当其他标签页修改了 localStorage，当前页可通过 storage 事件感知（注意：本页触发的变更不会触发本页事件）：

window.addEventListener('storage', (e) => {
  console.log('键', e.key, '从', e.oldValue, '变为', e.newValue);
  if (e.key === 'theme') {
    document.documentElement.setAttribute('data-theme', e.newValue);
  }
});

部分环境（如无痕模式、iOS Safari 某些版本）可能禁用 localStorage，使用前可检测：

function isStorageAvailable() {
  try {
    const test = '__storage_test__';
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

if (isStorageAvailable()) {
  localStorage.setItem('lastVisit', Date.now().toString());
} else {
  console.warn('本地存储不可用，降级处理');
}

基本上就这些。用好 localStorage 和 sessionStorage，能显著提升前端体验，不复杂但容易忽略类型和兼容性细节。