如何利用Typescript封裝本地存儲

Posted on by

前言

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

本地存儲使用場景

  • 用戶登錄後token的存儲
  • 用戶信息的存儲
  • 不同頁面之間的通信
  • 項目狀態管理的持久化，如redux的持久化、vuex的持久化等
  • 性能優化等
  • …

使用中存在的問題

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

解決方案

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

  • 數據類型的轉換
  • 過期時間
  • 數據加密
  • 統一的命名規范

功能實現

// 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 }

以上代碼簡單的實現瞭本地存儲的基本功能，內部完成瞭存取時的數據類型轉換操作，使用方式如下：

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

...

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

加入過期時間

設置過期時間的思路為：在set的時候在數據中加入expires的字段，記錄數據存儲的時間，get的時候將取出的expires與當前時間進行比較，如果當前時間大於expires，則表示已經過期，此時清除該數據記錄，並返回null，expires類型可以是boolean類型和number類型，默認為false，即不設置過期時間，當用戶設置為true時，默認過期時間為1年，當用戶設置為具體的數值時，則過期時間為用戶設置的數值，代碼實現如下：

interface IStoredItem {
  value: any
  expires?: number
}
...
set(
    key: string,
    value: any,
    expires: boolean | number = false,
  ) {
    const source: IStoredItem = { value: null }
    if (expires) {
    // 默認設置過期時間為1年，這個可以根據實際情況進行調整
      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
    }
  }

加入數據加密

加密用到瞭crypto-js包，在類中封裝encrypt,decrypt兩個私有方法來處理數據的加密和解密，當然，用戶也可以通過encryption字段設置是否對數據進行加密，默認為true，即默認是有加密的。另外可通過process.env.NODE_ENV獲取當前的環境，如果是開發環境則不予加密，以方便開發調試，代碼實現如下：

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
    }
  }
  
}

加入命名規范

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

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 }

總結

到此這篇關於如何利用Typescript封裝本地存儲的文章就介紹到這瞭,更多相關Typescript封裝本地存儲內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：