怎样用JavaScript操作本地存储？

站长帮

2025-05-08 15

在JavaScript中操作本地存储（Local Storage）和会话存储（Session Storage）非常简单，它们都是通过window对象提供的API实现的。以下是详细的操作方法：

1. 本地存储（Local Storage）

特点：数据永久保存，除非手动清除或代码删除。

基本操作：

// 存储数据（键值对）
localStorage.setItem('key', 'value'); // 值必须是字符串

// 获取数据
const value = localStorage.getItem('key'); // 返回字符串或null

// 删除指定键
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

// 获取键名（根据索引）
const keyName = localStorage.key(0); // 个键名

存储对象/数组：

需用JSON.stringify()和JSON.parse()转换：

const user = { name: 'Alice', age: 25 };

// 存对象
localStorage.setItem('user', JSON.stringify(user));

// 取对象
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Alice"

2. 会话存储（Session Storage）

特点：数据仅在当前标签页有效，关闭后自动清除。

// 用法与Local Storage完全一致，只是对象不同
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');

3. 监听存储变化

可以监听其他标签页对同一存储的修改：

window.addEventListener('storage', (event) => {
  console.log('变化的数据:', event.key);
  console.log('旧值:', event.oldValue);
  console.log('新值:', event.newValue);
});

注意事项：

容量限制：约5MB（不同浏览器可能不同）。
安全性：不要存储敏感信息（如密码）。
同步操作：会阻塞主线程，大量数据需谨慎。
兼容性：现代浏览器均支持，但旧版IE需测试（IE8+支持）。

示例：用户偏好设置

// 保存主题偏好
function saveTheme(theme) {
  localStorage.setItem('preferredTheme', theme);
}

// 加载时应用主题
window.addEventListener('DOMContentLoaded', () => {
  const theme = localStorage.getItem('preferredTheme') || 'light';
  document.body.className = theme;
});

通过以上方法，你可以轻松实现数据的本地持久化。

（本文来源：nzw6.com）