快捷導(dǎo)航

如何利用Typescript封裝本地存儲

更新時間：2022年01月05日 14:46:10 作者：前端小鐵匠

這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言

本地存儲是前端開發(fā)過程中經(jīng)常會用到的技術(shù)，但是官方api在使用上多有不便，且有些功能并沒有提供給我們相應(yīng)的api，比如設(shè)置過期時間等。本文無意于介紹關(guān)于本地存儲概念相關(guān)的知識，旨在使用typescript封裝一個好用的本地存儲類。

本地存儲使用場景

用戶登錄后token的存儲
用戶信息的存儲
不同頁面之間的通信
項目狀態(tài)管理的持久化，如redux的持久化、vuex的持久化等
性能優(yōu)化等
...

使用中存在的問題

官方api不是很友好（過于冗長），且都是以字符串的形式存儲，存取都要進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換
- localStorage.setItem(key, value)
- ...
無法設(shè)置過期時間
以明文的形式存儲，一些相對隱私的信息用戶都能很輕松的在瀏覽器中查看到
同源項目共享本地存儲空間，可能會引起數(shù)據(jù)錯亂

解決方案

將上述問題的解決方法封裝在一個類中，通過簡單接口的形式暴露給用戶直接調(diào)用。類中將會封裝以下功能：

數(shù)據(jù)類型的轉(zhuǎn)換
過期時間
數(shù)據(jù)加密
統(tǒng)一的命名規(guī)范

功能實現(xiàn)

// storage.ts

enum StorageType {
  l = 'localStorage',
  s = 'sessionStorage'
}

class MyStorage {
  storage: Storage

  constructor(type: StorageType) {
    this.storage = type === StorageType.l ? window.localStorage : window.sessionStorage
  }

  set(
    key: string,
    value: any
  ) {
    const data = JSON.stringify(value)
    this.storage.setItem(key, data)
  }

  get(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      return JSON.parse(value)
  }

  delete(key: string) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }
}

const LStorage = new MyStorage(StorageType.l)
const SStorage = new MyStorage(StorageType.s)

export { LStorage, SStorage }

以上代碼簡單的實現(xiàn)了本地存儲的基本功能，內(nèi)部完成了存取時的數(shù)據(jù)類型轉(zhuǎn)換操作，使用方式如下：

import { LStorage, SStorage } from './storage'

...

LStorage.set('data', { name: 'zhangsan' })
LStorage.get('data') // { name: 'zhangsan' }

加入過期時間

設(shè)置過期時間的思路為：在set的時候在數(shù)據(jù)中加入expires的字段，記錄數(shù)據(jù)存儲的時間，get的時候?qū)⑷〕龅膃xpires與當(dāng)前時間進(jìn)行比較，如果當(dāng)前時間大于expires，則表示已經(jīng)過期，此時清除該數(shù)據(jù)記錄，并返回null，expires類型可以是boolean類型和number類型，默認(rèn)為false，即不設(shè)置過期時間，當(dāng)用戶設(shè)置為true時，默認(rèn)過期時間為1年，當(dāng)用戶設(shè)置為具體的數(shù)值時，則過期時間為用戶設(shè)置的數(shù)值，代碼實現(xiàn)如下：

interface IStoredItem {
  value: any
  expires?: number
}
...
set(
    key: string,
    value: any,
    expires: boolean | number = false,
  ) {
    const source: IStoredItem = { value: null }
    if (expires) {
    // 默認(rèn)設(shè)置過期時間為1年，這個可以根據(jù)實際情況進(jìn)行調(diào)整
      source.expires =
        new Date().getTime() +
        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)
    }
    source.value = value
    const data = JSON.stringify(source)
    this.storage.setItem(key, data)
  }
  
  get(key: string) {
    const value = this.storage.getItem(key)
    if (value) {
      const source: IStoredItem = JSON.parse(value)
      const expires = source.expires
      const now = new Date().getTime()
      if (expires && now > expires) {
        this.delete(key)
        return null
      }

      return source.value
    }
  }

加入數(shù)據(jù)加密

加密用到了crypto-js包，在類中封裝encrypt,decrypt兩個私有方法來處理數(shù)據(jù)的加密和解密，當(dāng)然，用戶也可以通過encryption字段設(shè)置是否對數(shù)據(jù)進(jìn)行加密，默認(rèn)為true，即默認(rèn)是有加密的。另外可通過process.env.NODE_ENV獲取當(dāng)前的環(huán)境，如果是開發(fā)環(huán)境則不予加密，以方便開發(fā)調(diào)試，代碼實現(xiàn)如下：

import CryptoJS from 'crypto-js'

const SECRET_KEY = 'nkldsx@#45#VDss9'
const IS_DEV = process.env.NODE_ENV === 'development'
...
class MyStorage {
  ...
  
  private encrypt(data: string) {
    return CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
  }

  private decrypt(data: string) {
    const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY)
    return bytes.toString(CryptoJS.enc.Utf8)
  }
  
  set(
    key: string,
    value: any,
    expires: boolean | number = false,
    encryption = true
  ) {
    const source: IStoredItem = { value: null }
    if (expires) {
      source.expires =
        new Date().getTime() +
        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)
    }
    source.value = value
    const data = JSON.stringify(source)
    this.storage.setItem(key, IS_DEV ? data : encryption ? this.encrypt(data) : data
    )
  }
  
  get(key: string, encryption = true) {
    const value = this.storage.getItem(key)
    if (value) {
      const source: IStoredItem = JSON.parse(value)
      const expires = source.expires
      const now = new Date().getTime()
      if (expires && now > expires) {
        this.delete(key)
        return null
      }

      return IS_DEV
        ? source.value
        : encryption
        ? this.decrypt(source.value)
        : source.value
    }
  }
  
}

加入命名規(guī)范

可以通過在key前面加上一個前綴來規(guī)范命名，如項目名_版本號_key類型的合成key，這個命名規(guī)范可自由設(shè)定，可以通過一個常量設(shè)置，也可以通過獲取package.json中的name和version進(jìn)行拼接，代碼實現(xiàn)如下：

const config = require('../../package.json')

const PREFIX = config.name + '_' + config.version + '_'

...
class MyStorage {

  // 合成key
  private synthesisKey(key: string) {
    return PREFIX + key
  }
  
  ...
  
 set(
    key: string,
    value: any,
    expires: boolean | number = false,
    encryption = true
  ) {
    ...
    this.storage.setItem(
      this.synthesisKey(key),
      IS_DEV ? data : encryption ? this.encrypt(data) : data
    )
  }
  
  get(key: string, encryption = true) {
    const value = this.storage.getItem(this.synthesisKey(key))
    ...
  }

}

完整代碼

import CryptoJS from 'crypto-js'
const config = require('../../package.json')

enum StorageType {
  l = 'localStorage',
  s = 'sessionStorage'
}

interface IStoredItem {
  value: any
  expires?: number
}

const SECRET_KEY = 'nkldsx@#45#VDss9'
const PREFIX = config.name + '_' + config.version + '_'
const IS_DEV = process.env.NODE_ENV === 'development'

class MyStorage {
  storage: Storage

  constructor(type: StorageType) {
    this.storage =
      type === StorageType.l ? window.localStorage : window.sessionStorage
  }

  private encrypt(data: string) {
    return CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
  }

  private decrypt(data: string) {
    const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY)
    return bytes.toString(CryptoJS.enc.Utf8)
  }

  private synthesisKey(key: string) {
    return PREFIX + key
  }

  set(
    key: string,
    value: any,
    expires: boolean | number = false,
    encryption = true
  ) {
    const source: IStoredItem = { value: null }
    if (expires) {
      source.expires =
        new Date().getTime() +
        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)
    }
    source.value = value
    const data = JSON.stringify(source)
    this.storage.setItem(
      this.synthesisKey(key),
      IS_DEV ? data : encryption ? this.encrypt(data) : data
    )
  }

  get(key: string, encryption = true) {
    const value = this.storage.getItem(this.synthesisKey(key))
    if (value) {
      const source: IStoredItem = JSON.parse(value)
      const expires = source.expires
      const now = new Date().getTime()
      if (expires && now > expires) {
        this.delete(key)
        return null
      }

      return IS_DEV
        ? source.value
        : encryption
        ? this.decrypt(source.value)
        : source.value
    }
  }

  delete(key: string) {
    this.storage.removeItem(this.synthesisKey(key))
  }

  clear() {
    this.storage.clear()
  }
}

const LStorage = new MyStorage(StorageType.l)
const SStorage = new MyStorage(StorageType.s)

export { LStorage, SStorage }