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，能显著提升前端体验，不复杂但容易忽略类型和兼容性细节。
