LocalStorage是Web Storage API的一部分，允许以键值对形式在浏览器中持久存储字符串数据。它提供setItem、getItem、removeItem和clear等方法进行数据操作，存储容量大且不随请求发送至服务器。由于仅支持字符串类型，存储对象或数组需通过JSON.stringify转换，读取时用JSON.parse解析。受同源策略限制，数据不会自动过期，需手动清理，且不宜存储敏感信息以防XSS攻击。掌握基本操作与注意事项可有效用于保存用户偏好等本地数据。
HTML5 的本地存储（LocalStorage）提供了一种简单的方式，让网页在用户浏览器中持久保存数据。与 Cookie 不同，LocalStorage 存储容量更大（通常为 5-10MB），不会随每次请求发送到服务器，适合存储不敏感的本地信息。下面介绍如何使用 LocalSt
orage 进行基本操作。
什么是 LocalStorage？
LocalStorage 是 Web Storage API 的一部分，允许你在浏览器中以键值对的形式存储字符串数据。只要不清除浏览器缓存，数据会一直保留，即使关闭页面或重启浏览器也不会丢失。
基本操作方法
LocalStorage 提供了几个常用的方法来存取和删除数据：
- setItem(key, value)：存储数据
- getItem(key)：读取数据
- removeItem(key)：删除某条数据
- clear()：清空所有数据
- key(index)：通过索引获取键名
// 存储用户名称
localStorage.setItem('username', 'Alice');
// 读取用户名称
let name = localStorage.getItem('username');
console.log(name); // 输出: Alice
// 删除用户名
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
存储复杂数据类型
LocalStorage 只能存储字符串，如果要保存数组或对象，需要先转换成 JSON 字符串：
// 存储对象
let user = { name: 'Bob', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 读取并解析对象
let userData = JSON.parse(localStorage.getItem('user'));
console.log(userData.name); // 输出: Bob
注意事项与限制
使用 LocalStorage 时需要注意以下几点：
- 只能存储字符串，非字符串类型需手动转换
- 数据不会过期，需手动清理
- 同源策略限制：只能在同一域名下访问存储的数据
- 不能跨域共享数据
- 不适合存储敏感信息（如密码、令牌），因为容易被 XSS 攻击窃取
基本上就这些。掌握 setItem、getItem 和 JSON 转换，就能在项目中灵活使用 LocalStorage 保存用户偏好、表单数据等本地信息。不复杂但容易忽略细节，比如忘记 JSON 转换会导致存入 "[object Object]" 这类问题。
