JS本地存储教程：localStorage与sessionStorage详解

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JS本地存储使用教程：localStorage与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 保存的数据只在当前会话有效，关闭浏览器标签页后数据会被清除。适合临时保存敏感或短期信息。

• 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本地存储教程：localStorage与sessionStorage详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！