vue3 localstorage和sessionstorage

### Vue3 中 `localStorage` 和 `sessionStorage` 的使用

#### 本地存储机制概述
在现代前端开发中，浏览器提供了多种方式来在客户端存储数据，其中最常用的是 `LocalStorage` 和 `SessionStorage`。两者均属于 Web Storage API 的一部分[^2]。

#### 存储对象特性对比
- **持久性**
- `LocalStorage`: 数据无过期时间限制，除非手动清除或通过编程手段删除。
- `SessionStorage`: 生命周期仅限于当前会话期间，在关闭页面或浏览器标签页之后会被自动清理。

- **作用域**
- 对于同源策略下的不同窗口/标签页间共享相同的数据副本；但是当涉及到跨域访问时，则遵循严格的隔离原则[^1]。

#### 实际操作案例展示

##### 基础读写方法演示

// 判断是否支持Web Storage功能
if (typeof(Storage)!=="undefined") {
  
  // 设置项
  localStorage.setItem('username', 'JohnDoe');       // 永久保存用户名
  sessionStorage.setItem('token', 'abcde12345');     // 当前会话有效令牌
  
} else {
  console.error("您的浏览器不支持 Web Storage.");
}

##### 封装工具函数提升代码质量
为了增强程序的可维护性和复用度，建议创建专门的服务类来进行统一管理：

import { ref, onMounted, watchEffect } from "vue";

class StorageService {

  static setItem(key:string,value:any){
      try{
          const jsonValue = JSON.stringify(value);
          localStorage.setItem(key,jsonValue);
      }
      catch(e){
          console.error(`设置${key}失败`,e.message);
      }
  }

  static getItem<T>(key:string):T|null{
      let result : T | null= null;
      try{
           const itemStr = localStorage.getItem(key);
           if(itemStr !==null && itemStr!==''){
               result=<T>JSON.parse(itemStr);
           }
      }
      catch(e){
          console.error(`获取${key}失败`,e.message);
      }
      finally{return result;}
  }

}

export default new StorageService();

上述实现不仅简化了基本存取逻辑，还加入了异常处理机制确保应用稳定性[^4]。

##### 结合响应式属性同步状态
利用 Vue Composition API 可以轻松达成组件内部状态与持久化层之间的双向绑定效果:

const userState = ref<string>("");

onMounted(() => {
   const savedUser = StorageService.getItem<string>('username');
   if(savedUser!==null){userState.value=savedUser};
});

watchEffect(()=>{
   StorageService.setItem('username',userState.value);
});

此模式下每当视图更新触发相应事件后都会及时刷新缓存记录，反之亦然[^3]。