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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-16

浏览次数：次

返回列表

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

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

J*aScript 的本地存储功能可以让网页在用户浏览器中保存数据，即使关闭页面或重启浏览器，数据依然存在。其中最常用的就是 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 字符串：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

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');
}

基本上就这些。localStorage 使用起来很简单，关键是理解它只能存字符串，复杂数据要转 JSON，同时注意不要存放敏感信息。不复杂但容易忽略。

以上就是js脚本如何实现本地存储功能_js本地存储localStorage使用教程的详细内容，更多请关注其它相关文章！