LocalStorage 是什么？
简单来说，LocalStorage 是浏览器提供的一种本地存储机制，它允许我们在用户的浏览器中存储键值对数据。与 Cookie 相比，它有更大的存储空间（通常 5MB 左右），而且数据不会随着请求发送到服务器，安全性更好。
为什么需要 LocalStorage？
- 持久化存储：关闭浏览器后数据仍然存在
- 简单易用：API 非常直观，几个方法就能完成基本操作
- 提升用户体验：可以记住用户偏好、登录状态等
基本操作三步走
我通过一个简单的用户名存储示例来理解 LocalStorage 的核心功能：
1. 存储数据
使用 setItem 方法可以存储数据，它接受两个参数：键名和值。比如要存储用户名，可以这样操作：
localStorage.setItem('username', '张三');
这个操作会把'张三'这个值以'username'为键名存储在浏览器中。
2. 读取数据
使用 getItem 方法读取数据，只需要传入键名就能获取对应的值：
let name = localStorage.getItem('username'); console.log(name); // 输出'张三'
如果键名不存在，会返回 null。
3. 删除数据
删除单个数据项使用 removeItem 方法：
localStorage.removeItem('username');
如果想清空所有 LocalStorage 数据，可以使用 clear 方法：
localStorage.clear();
实际应用示例
为了更直观地理解，可以创建一个简单的页面，包含三个按钮分别对应上述三个功能：
- 存储按钮：点击后将当前输入的用户名存入 LocalStorage
- 读取按钮：点击后从 LocalStorage 读取并显示用户名
- 清除按钮：点击后清除存储的用户名
每个操作后都会在页面上显示操作结果，这样就能清楚地看到 LocalStorage 的变化。
注意事项
- 存储限制：不同浏览器可能有不同的存储限制，通常在 5MB 左右
- 数据类型：LocalStorage 只能存储字符串，如果要存储对象需要先转为 JSON
- 同步操作：所有 LocalStorage 操作都是同步的，可能会阻塞页面渲染
