本地存储封装

前言

在项目中使用本地存储(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 按钮