JS本地存储怎么操作_JS localStorage与sessionStorage使用教程

新闻中心 NEWS CENTER

2025-11-16

浏览次数：次

localStorage持久存储，sessionStorage仅限会话；两者均用setItem、getItem等方法操作，配合JSON处理对象，注意安全与异常。

js本地存储怎么操作_js localstorage与sessionstorage使用教程

J*aScript 提供了两种常见的本地存储方式：localStorage 和 sessionStorage。它们都能在浏览器中保存数据，使用简单，适合存储字符串类的轻量级信息。下面详细介绍它们的用法和区别。

localStorage 用于长期保存数据，除非手动清除，否则数据不会过期。

保存数据：
使用 setItem() 方法存储键值对。

localStorage.setItem('username', '张三');

读取数据：
使用 getItem() 获取指定键的值。

const name = localStorage.getItem('username');

删除数据：
使用 removeItem() 删除某一条数据。

localStorage.removeItem('username');

清空所有数据：
使用 clear() 清除当前域名下所有 localStorage 数据。

localStorage.clear();

sessionStorage 的操作方法与 localStorage 完全相同，但生命周期不同 —— 数据仅在当前会话有效，关闭页面或浏览器后自动清除。

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

保存临时数据：

sessionStorage.setItem('token', 'abc123');

获取临时数据：

const token = sessionStorage.getItem('token');

删除或清空：

sessionStorage.removeItem('token');<br>sessionStorage.clear();

虽然 localStorage 和 sessionStorage 只能存储字符串，但可以通过 JSON 转换处理对象或数组。

存储对象时先用 JSON.stringify() 转为字符串
读取时用 JSON.parse() 还原为对象
例如：
localStorage.setItem('user', JSON.stringify({name: '李四', age: 25}));
const userData = JSON.parse(localStorage.getItem('user'));
注意异常处理，某些情况下（如存储空间满）可能抛出错误
不要存储敏感信息，本地存储对 XSS 攻击较脆弱