关于javascript:本地存储封装

前言

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