编辑“︁JavaScript LocalStorage”︁（章节）

= JavaScript LocalStorage =

'''LocalStorage''' 是浏览器提供的一种 Web Storage API，允许网页在用户的浏览器中持久存储键值对数据。与 [[Cookies]] 不同，LocalStorage 的数据不会随 HTTP 请求发送到服务器，且存储容量更大（通常为 5MB 或更高）。它是 [[JavaScript BOM]]（浏览器对象模型）的一部分，常用于保存用户偏好设置、缓存数据或离线应用状态。

== 基本概念 ==
LocalStorage 是 [[Window]] 对象的属性，通过 `window.localStorage` 访问。它提供以下核心特性：
* '''持久性'''：数据在浏览器关闭后仍然保留，除非手动清除。
* '''同源策略'''：数据仅对同一协议、域名和端口的页面可见。
* '''同步操作'''：所有操作（读取、写入）都是同步的，可能阻塞主线程。

=== 与 SessionStorage 的区别 ===
{| class="wikitable"
|-
! 特性 !! LocalStorage !! SessionStorage
|-
| 生命周期 || 永久存储，除非手动删除 || 仅在当前会话有效（关闭标签页/浏览器后清除）
|-
| 作用域 || 同源的所有标签页共享 || 仅限当前标签页
|}

== 基本操作 ==
=== 存储数据 ===
使用 <code>setItem(key, value)</code> 方法，其中 <code>value</code> 必须是字符串：
<syntaxhighlight lang="javascript">
// 存储用户名
localStorage.setItem('username', 'Alice');
</syntaxhighlight>

=== 读取数据 ===
通过 <code>getItem(key)</code> 获取数据：
<syntaxhighlight lang="javascript">
const username = localStorage.getItem('username');
console.log(username); // 输出: "Alice"
</syntaxhighlight>

=== 删除数据 ===
移除单个键值对：
<syntaxhighlight lang="javascript">
localStorage.removeItem('username');
</syntaxhighlight>

清空所有数据：
<syntaxhighlight lang="javascript">
localStorage.clear();
</syntaxhighlight>

== 高级用法 ==
=== 存储复杂对象 ===
LocalStorage 仅支持字符串，存储对象需使用 <code>JSON.stringify()</code>：
<syntaxhighlight lang="javascript">
const user = { name: 'Bob', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 读取时解析
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: "Bob"
</syntaxhighlight>

=== 监听存储事件 ===
当其他同源页面修改 LocalStorage 时触发：
<syntaxhighlight lang="javascript">
window.addEventListener('storage', (event) => {
  console.log(`键 ${event.key} 从 ${event.oldValue} 变更为 ${event.newValue}`);
});
</syntaxhighlight>

== 实际案例 ==
=== 用户主题偏好 ===
保存用户选择的主题模式（深色/浅色）：
<syntaxhighlight lang="javascript">
// 切换主题时保存
function setTheme(theme) {
  document.body.className = theme;
  localStorage.setItem('preferredTheme', theme);
}

// 页面加载时恢复
const savedTheme = localStorage.getItem('preferredTheme') || 'light';
setTheme(savedTheme);
</syntaxhighlight>

=== 表单自动保存 ===
实时保存表单输入，防止意外丢失：
<syntaxhighlight lang="javascript">
const form = document.getElementById('myForm');

// 输入时保存
form.addEventListener('input', () => {
  localStorage.setItem('formDraft', JSON.stringify({
    name: form.name.value,
    email: form.email.value
  }));
});

// 页面加载时恢复
const draft = JSON.parse(localStorage.getItem('formDraft'));
if (draft) {
  form.name.value = draft.name;
  form.email.value = draft.email;
}
</syntaxhighlight>

== 限制与最佳实践 ==
=== 容量限制 ===
不同浏览器的限制不同（通常 5MB），可用以下代码检测：
<syntaxhighlight lang="javascript">
function testLocalStorageLimit() {
  const testKey = 'test';
  try {
    localStorage.setItem(testKey, new Array(5 * 1024 * 1024).join('a'));
  } catch (e) {
    console.error('LocalStorage 已满:', e);
  } finally {
    localStorage.removeItem(testKey);
  }
}
</syntaxhighlight>

=== 安全注意事项 ===
* 不要存储敏感信息（如密码、令牌）
* 考虑使用 [[IndexedDB]] 处理更大数据集
* 对存储的数据进行校验，防止 [[XSS]] 攻击

== 性能优化 ==
对于频繁操作的数据，可缓存到内存中：
<syntaxhighlight lang="javascript">
let cachedData = null;

function getData() {
  if (!cachedData) {
    cachedData = JSON.parse(localStorage.getItem('largeData'));
  }
  return cachedData;
}
</syntaxhighlight>

== 浏览器兼容性 ==
LocalStorage 被所有现代浏览器支持，包括：
* Chrome 4+
* Firefox 3.5+
* Safari 4+
* IE 8+
* Edge 12+

== 参见 ==
* [[SessionStorage]]
* [[Cookies]]
* [[IndexedDB]]
* [[Web SQL]]（已废弃）

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]