localStorage 存储和使用

localStorage 是 Web 浏览器提供的一种本地存储机制，主要用于长期存储用户数据，不会因为浏览器窗口关闭而消失。它是客户端JavaScript可以直接访问的，非常适合存放不需要频繁刷新就保留的状态或配置信息。

以下是使用 localStorage 的基本步骤：

1. **存储数据**：
- 使用 `localStorage.setItem(key, value)` 函数存储数据，`key` 是键名，`value` 是需要存储的值，通常是字符串形式。例如：

     localStorage.setItem('username', 'John Doe');

2. **读取数据**：
- 使用 `localStorage.getItem(key)` 函数获取指定键名对应的值，返回的是字符串类型。如果找不到对应键，则返回 `null`：

     var username = localStorage.getItem('username'); // John Doe

3. **检查是否存在**：
- 使用 `localStorage.key(index)` 获取特定索引位置的键名，或 `localStorage.length` 检查总共有多少项存储数据：

     if(localStorage.length > 0) {
       console.log('localStorage is not empty');
     }

4. **删除数据**：
- 如果想移除某个键值对，可以使用 `localStorage.removeItem(key)`：

     localStorage.removeItem('username');

5. **清空所有数据**：
- 如果需要彻底清除所有存储的数据，可以使用 `localStorage.clear()` 函数：

     localStorage.clear();

6. **兼容性**：
- 注意不是所有的浏览器都支持 localStorage，尤其是旧版本的浏览器可能会有差异。在使用前，最好做一下适配处理。

在前端应用中，我们通常会利用 Vuex 或其他状态管理库结合 localStorage，以实现跨页面的状态管理和持久化功能。