前言

在我的项目中应用本地存储(LocalStorage/SessionStorage)的场景有很多，如果有较多频次的应用，则能够思考简略封装一下。

封装便当：

  • 对立治理：如果视频频次将多，思考将本地存储全放到某一个文件夹中，防止前期凌乱几不好保护等问题；
  • 序列化：存储的时候转字符串，应用的时候转回来，通过公共办法解决即可，不必当应用的时候再一一解决；
  • 类型推断：在实例化时传入类型，在传入和获取的时候会主动推断类型；
  • 兼容性：PC\挪动\小小程序等多端通用

接下来简略实现一下：(以 LocalStorage 为例)

封装

// src/utils/storage.tsinterface IStorage<T> {  key: string;  defaultValue: T;}export class Storage<T> implements IStorage<T> {  key: string;  defaultValue: T;  constructor(key: string, defaultValue: T) {    this.key = key;    this.defaultValue = defaultValue;  }  // 填值  setItem(value: T) {    localStorage.setItem(this.key, JSON.stringify(value));  }  // 取值  getItem(): T {    const val = localStorage[this.key] && localStorage.getItem(this.key);    if (val === undefined) return this.defaultValue;    try {      return val && val !== 'null' && val !== 'undefined'        ? (JSON.parse(val) as T)        : this.defaultValue;    } catch (err) {      return val && val !== 'null' && val !== 'undefined'        ? (val as unknown as T)        : this.defaultValue;    }  }  // 移除  removeItem() {    localStorage.removeItem(this.key);  }}

实例化

// src/common/storage.tsimport { Storage } from '../utils/storage';// user messageexport interface IUser {  id: number;  name: string;  phoneNum: number;}export const userStorage = new Storage<IUser | null>('user', null);

应用

以 angular 为例

// test.html<!-- user Test --><p>  <button (click)="addUser()">Add</button>  <button (click)="removeUser()">Remove</button></p>
// test.component.tsimport { userStorage } from 'src/app/common/storage';// something else ...export class TestComponent {  // something else ...    addUser() {    userStorage.setItem({      id: Date.now(),      name: 'ZhangSan',      phoneNum: 13300002222,    });    const user = userStorage.getItem();    console.log(999, user);  }  removeUser() {    userStorage.removeItem();  }}

演示

  1. 点击 Add 按钮：

  1. 点击 Remove 按钮