js脚本如何实现本地存储功能_js本地存储localStorage使用教程

localStorage是Web Storage API提供的持久化存储方案，数据无过期时间且按域名隔离，通过setItem、getItem等方法操作字符串数据，存对象需用JSON.stringify转换，适用于保存用户偏好、缓存数据等场景，但不宜存储敏感信息。

JavaScript 的本地存储功能可以让网页在用户浏览器中保存数据，即使关闭页面或重启浏览器，数据依然存在。其中最常用的就是 localStorage，它操作简单、兼容性好，适合存储字符串类的轻量级数据。

localStorage 是什么？

localStorage 是 Web Storage API 提供的一种本地存储方式，数据没有过期时间，除非手动清除，否则一直保留在用户的设备上。每个域名有独立的存储空间（通常为5-10MB），不同网站之间无法互相访问。

基本操作方法

localStorage 提供了几个常用的方法来存取和删除数据：

• setItem(key, value)：保存数据，key 和 value 都是字符串
• getItem(key)：根据 key 获取对应的值
• removeItem(key)：删除指定 key 的数据
• clear()：清空该域名下所有 localStorage 数据
• key(index)：获取第 index 个 key 的名称（可用于遍历）

// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');

// 读取数据
const name = localStorage.getItem('username');
console.log(name); // 输出：张三

// 修改数据（直接覆盖）
localStorage.setItem('age', '26');

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

// 清空全部
// localStorage.clear();

存储对象或数组怎么办？

localStorage 只能存储字符串，如果要保存对象或数组，需要先转换成 JSON 字符串：

魔术橡皮擦

智能擦除、填补背景内容

下载

const user = { name: '李四', age: 30 };

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

// 读取并解析
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 输出：李四

注意：使用 JSON.parse() 前要确保数据存在且格式正确，否则会报错。可以加判断防止异常：

const data = localStorage.getItem('user');
const user = data ? JSON.parse(data) : null;

实际应用场景

localStorage 适合用于：

• 记住用户偏好设置（如主题、字体大小）
• 保存登录状态标识（如 token，但敏感信息建议用 httpOnly cookie）
• 缓存部分静态数据，减少重复请求
• 表单内容临时保存，防止意外关闭丢失

例如记住用户选择的夜间模式：

// 用户开启夜间模式
localStorage.setItem('theme', 'dark');
document.body.classList.add('dark-theme');

// 页面加载时读取
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-theme');
}