关于javascript:本地存储封装

41次阅读

共计 1559 个字符,预计需要花费 4 分钟才能阅读完成。

前言

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

  1. 点击 Remove 按钮

正文完
 0