如何使用Web Storage进行状态持久化？

在类Web开发范式中，Web Storage（LocalStorage/SessionStorage）是轻量级状态持久化的首选方案，操作简单且适合存储中小型数据（如用户偏好、表单草稿等）。以下是具体使用方法和最佳实践：

一、Web Storage核心特性

Web Storage提供两种存储方式，核心区别在于数据生命周期：

• LocalStorage：持久化存储，除非手动删除，否则数据永久保留（应用重启/设备重启后仍存在）。
• SessionStorage：会话级存储，仅在当前页面会话（如标签页）有效，关闭页面后数据自动清除。

两者均为键值对存储（值只能是字符串），API完全一致，单域名下容量通常为5-10MB。

二、基础用法（以LocalStorage为例）

1. 存储数据（setItem）

// 存储字符串
localStorage.setItem('username', '鸿蒙用户');

// 存储数字（会自动转为字符串）
localStorage.setItem('age', 25);

// 存储对象/数组（需先序列化为JSON字符串）
const userInfo = {
    id: 1, name: 'Harmony', isLogin: true };
localStorage.setItem('userInfo', JSON.stringify(userInfo));

2. 读取数据（getItem）

// 读取字符串
const username = localStorage.getItem('username');
console.log(username); // 输出："鸿蒙用户"

// 读取数字（需手动转为Number）
const age = Number(localStorage.getItem('age'));
console.log(age); // 输出：25（数字类型）

// 读取对象/数组（需解析JSON）
const userInfoStr = localStorage.getItem('userInfo');
const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null;
console.log(userInfo.name); // 输出："Harmony"

3. 删除数据

// 删除单个键
localStorage.removeItem('age');

// 清空所有数据
localStorage.clear();

4. 遍历所有数据

// 遍历所有键值对
for (let i = 0; i < localStorage.length; i++) {
   
  const key = localStorage.key(i); // 获取第i个键
  const value = localStorage.getItem(key);
  console.log(`${
     key}: ${
     value}`);
}

三、SessionStorage的使用（会话级存储）

SessionStorage的API与LocalStorage完全一致，仅生命周期不同，适合存储临时数据：

// 存储会话级数据（如多步骤表单的中间状态）
sessionStorage.setItem('formStep', '2');
sessionStorage.setItem('tempData', JSON.stringify({
    phone: '13800138000' }));

// 读取数据
const currentStep = sessionStorage.getItem('formStep');

// 关闭页面后，数据会自动清除，无需手动删除

四、状态持久化实战示例

以“用户登录状态持久化”为例，实现关闭应用后仍保留登录信息：

<!-- login.hml -->
<div class="login-container">
  <input type="text" placeholder="用户名" value="{
    { username }}" onchange="updateUsername">
  <input type="password" placeholder="密码" value="{
    { password }}" onchange="updatePassword">
  <button onclick="login">登录</button>
  <button onclick="logout">退出登录</button>
</div>

// login.js
export default {
   
  data: {
   
    username: '',
    password: '',
    userInfo: null // 登录状态
  },
  onInit() {
   
    // 页面初始化时，从LocalStorage恢复登录状态
    this.restoreLoginState();
  },
  updateUsername(e) {
   
    this.username = e.value;
  },
  updatePassword(e) {
   
    this.password = e.value;
  },
  // 登录并保存状态
  login() {
   
    // 模拟登录接口调用
    const mockLogin = () => {
   
      return new Promise(resolve => {
   
        setTimeout(() => {
   
          resolve({
    id: 1001, name: this.username, token: 'mock_token_123' });
        }, 500);
      });
    };

    mockLogin().then(user => {
   
      // 保存到内存状态
      this.userInfo = user;
      // 持久化到LocalStorage
      localStorage.setItem('loginState', JSON.stringify(user));
      console.log('登录成功，状态已保存');
    });
  },
  // 退出登录并清除状态
  logout() {
   
    this.userInfo = null;
    this.username = '';
    this.password = '';
    // 清除LocalStorage中的状态
    localStorage.removeItem('loginState');
    console.log('已退出登录');
  },
  // 从LocalStorage恢复状态
  restoreLoginState() {
   
    const savedState = localStorage.getItem('loginState');
    if (savedState) {
   
      this.userInfo = JSON.parse(savedState);
      this.username = this.userInfo.name; // 回显用户名
      console.log('已恢复登录状态');
    }
  }
};

五、最佳实践与注意事项

1. 数据类型处理

   • 仅支持字符串存储，对象/数组必须通过JSON.stringify()序列化，读取时用JSON.parse()还原。
   • 数字、布尔值等基本类型建议显式转换（如Number()、Boolean()），避免隐式类型错误。

2. 容量控制

   • 单个域名下存储总量不超过5-10MB，避免存储大型数据（如Base64图片），否则可能导致存储失败或性能下降。

3. 安全性考量

   • 不适合存储敏感数据（如密码、token），易被XSS攻击窃取。敏感信息建议加密后存储（如使用简单的Base64或加密算法）。

   • 示例：简单加密token

     // 加密（简单示例，实际需用更安全的算法）
     const encrypt = (str) => btoa(encodeURIComponent(str));
     // 解密
     const decrypt = (str) => decodeURIComponent(atob(str));
     
     // 存储加密后的token
     localStorage.setItem('token', encrypt('real_token'));
     // 读取时解密
     const token = decrypt(localStorage.getItem('token'));
     

4. 避免频繁写入

   • 高频更新的数据（如表单输入实时保存）建议使用防抖（debounce），减少写入次数：

     // 防抖函数：500ms内多次调用只执行最后一次
     const debounce = (fn, delay = 500) => {
            
       let timer;
       return (...args) => {
            
         clearTimeout(timer);
         timer = setTimeout(() => fn.apply(this, args), delay);
       };
     };
     
     // 实时保存表单（防抖处理）
     this.saveFormDebounced = debounce((formData) => {
            
       localStorage.setItem('formDraft', JSON.stringify(formData));
     });
     
     // 输入框变化时调用
     onInputChange(e) {
            
       this.formData[e.field] = e.value;
       this.saveFormDebounced(this.formData); // 500ms内只保存一次
     }
     

5. 兼容性与异常处理

   • 类Web开发范式完全支持Web Storage，但需处理存储失败的情况（如容量满、隐私模式下禁用存储）：

     try {
            
       localStorage.setItem('test', 'data');
     } catch (e) {
            
       console.error('存储失败：', e.message); // 可能因容量满或隐私设置导致
       // 降级处理：使用内存存储或提示用户
     }
     

总结

Web Storage（LocalStorage/SessionStorage）是类Web开发范式中最简单高效的状态持久化方案，适合存储轻量、非敏感的数据。核心是掌握字符串序列化和状态读写时机，结合防抖、加密等技巧可进一步提升可靠性和安全性。对于大型数据或复杂查询场景，建议搭配IndexedDB或File存储使用。