前言

在項目中使用本地存儲(LocalStorage/SessionStorage)的場景有很多，如果有較多頻次的使用，則可以考慮簡單封裝一下。

封裝便利：

• 統一管理：如果視頻頻次將多，考慮將本地存儲全放到某一個文件夾中，避免後期混亂幾不好維護等問題；
• 序列化：存儲的時候轉字符串，使用的時候轉回來，通過公共方法處理即可，不用當使用的時候再逐個處理；
• 類型推斷：在實例化時傳入類型，在傳入和獲取的時候會自動推斷類型；
• 兼容性：PC\移動\小小程序等多端通用

接下來簡單實現一下：(以 LocalStorage 為例)

封裝

// src/utils/storage.ts
interface 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.ts
import { Storage } from '../utils/storage';

// user message
export 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.ts
import { 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 按鈕：

2. 點擊 Remove 按鈕