本地存储封装

前言

在项目中使用本地存储(LocalStorage/SessionStorage)的场景有很多,如果有较多频次的使用,则可以考虑简单封装一下。

封装便利:

  • 统一管理:如果视频频次将多,考虑将本地存储全放到某一个文件夹中,避免后期混乱几不好维护等问题;
  • 序列化:存储的时候转字符串,使用的时候转回来,通过公共方法处理即可,不用当使用的时候再逐个处理;
  • 类型推断:在实例化时传入类型,在传入和获取的时候会自动推断类型;
  • 兼容性:PC\移动\小小程序等多端通用

接下来简单实现一下:(以 LocalStorage 为例)

封装

// src/utils/storage.ts
interface IStorage {
  key: string;
  defaultValue: T;
}

export class Storage implements IStorage {
  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('user', null);

使用

以 angular 为例

// test.html

// 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 按钮:

本地存储封装_第1张图片

本地存储封装_第2张图片

  1. 点击 Remove 按钮

本地存储封装_第3张图片

你可能感兴趣的:(本地存储封装)