JS本地存储怎么用_JavaScriptlocalStorage与sessionStorage使用方法

localStorage用于持久存储，数据长期保存；sessionStorage仅在会话期间有效，关闭标签页后清除。两者均以字符串形式存储，支持setItem、getItem等方法操作，可通过JSON.stringify和JSON.parse处理对象。注意：不同域名隔离，存储上限5-10MB，避免存敏感信息。

JavaScript 提供了两种常用的本地存储方式：localStorage 和 sessionStorage。它们都能在浏览器中保存数据，使用简单，不需要依赖服务器。下面详细介绍它们的用法和区别。

localStorage 基本用法

localStorage 用于长期保存数据，除非用户手动清除浏览器缓存或通过代码删除，否则数据会一直存在。

• 保存数据： localStorage.setItem('key', 'value');
• 读取数据： localStorage.getItem('key');
• 删除数据： localStorage.removeItem('key');
• 清空所有数据： localStorage.clear();

示例：

// 保存用户名称
localStorage.setItem('username', '张三');

// 获取用户名
let name = localStorage.getItem('username');
console.log(name); // 输出：张三

// 删除用户名
localStorage.removeItem('username');

sessionStorage 基本用法

sessionStorage 保存的数据只在当前会话有效，关闭浏览器标签页后数据会被清除。适合临时保存敏感或短期信息。

立即学习“Java免费学习笔记（深入）”；

AutoGLM沉思

智谱AI推出的具备深度研究和自主执行能力的AI智能体

129

查看详情

• sessionStorage.setItem('key', 'value');
• sessionStorage.getItem('key');
• sessionStorage.removeItem('key');
• sessionStorage.clear();

示例：

// 保存登录状态（仅当前页面会话）
sessionStorage.setItem('isLoggedIn', 'true');

// 检查是否已登录
if (sessionStorage.getItem('isLoggedIn') === 'true') {
  console.log('用户已登录');
}

// 关闭页面后数据自动消失

注意事项和使用建议

虽然 localStorage 和 sessionStorage 使用方便，但也要注意以下几点：

• 只能存储字符串。如果要保存对象，需用 JSON.stringify() 转换，读取时用 JSON.parse() 解析。
• 不同域名的存储空间是隔离的，无法互相访问。
• 存储大小有限制，通常为 5-10MB，超出会报错。
• 不要存储敏感信息（如密码），因为数据对 JavaScript 完全可见。

对象存储示例：

// 存储对象
let user = { name: '李四', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

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

以上就是JS本地存储怎么用_JavaScriptlocalStorage与sessionStorage使用方法的详细内容，更多请关注php中文网其它相关文章！