JavaScript本地存储主要使用localStorage和sessionStorage，二者均以字符串键值对形式存储数据，API相同但生命周期不同：localStorage永久保存，sessionStorage仅限当前标签页。
JavaScript 本地存储主要靠 localStorage 和 sessionStorage，它们都以键值对（字符串）形式保存数据，操作简单、无需后端参与，适合存用户偏好、表单草稿、登录状态等轻量信息。
基础写法：存、取、删、清空
两者 API 完全一致，区别只在于生命周期：
localStorage：数据永久保存，除非手动清除或代码删除 sessionStorage：仅在当前浏览器标签页有效，关闭标签即丢失
常用方法示例：
// 存储（自动转为字符串）localStorage.setItem('theme', 'dark');sessionStorage.setItem('cartCount', '3');// 读取（返回字符串，注意类型）const theme = localStorage.getItem('theme'); // 'dark'const count = sessionStorage.getItem('cartCount'); // '3'// 删除某一项localStorage.removeItem('theme');// 清空全部（谨慎使用）sessionStorage.clear();
注意数据类型：只能存字符串
数字、对象、布尔值等直接存会自动调用 .toString()，导致意外结果：
立即学习“Java免费学习笔记（深入）”；
localStorage.setItem('age', 25); // 存的是 '25'，没问题localStorage.setItem('user', {name: 'Tom'}); // 存的是 '[object Object]'
解决办法：存前用 JSON.stringify()，取后用 JSON.parse()：
const user = { name: 'Tom', active: true };localStorage.setItem('user', JSON.stringify(user));const savedUser = JSON.parse(localStorage.getItem('user'));// → { name: 'Tom', active: true }
建议封装一个安全读写函数，自动处理解析失败：
function safeSet(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); } catch (e) { console.warn('本地存储失败:', e); }}function safeGet(key, defaultValue = null) { try { const str = localStorage.getItem(key); return str ? JSON.parse(str) : defaultValue; } catch (e) { return defaultValue; }}
实用技巧：监听变化 & 判断是否可用
当其他标签页修改了 localStorage，当前页可通过 storage 事件感知（注意：本页触发的变更不会触发本页事件）：
window.addEventListener('storage', (e) => { console.log('键', e.key, '从', e.oldValue, '变为', e.newValue); if (e.key === 'theme') { document.documentElement.setAttribute('data-theme', e.newValue); }});
部分环境（如无痕模式、iOS Safari 某些版本）可能禁用 localStorage，使用前可检测：
function isStorageAvailable() { try { const test = '__storage_test__'; localStorage.setItem(test, test); localStorage.removeItem(test); return true; } catch (e) { return false; }}if (isStorageAvailable()) { localStorage.setItem('lastVisit', Date.now().toString());} else { console.warn('本地存储不可用，降级处理');}
基本上就这些。用好 localStorage 和 sessionStorage，能显著提升前端体验，不复杂但容易忽略类型和兼容性细节。
以上就是如何用JavaScript实现本地存储？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543322.html
微信扫一扫 
支付宝扫一扫 
