Typescriptを使用してローカルストレージをカプセル化する方法

// ストレージ.ts

列挙型ストレージタイプ{
  l = 'ローカルストレージ',
  s = 'セッションストレージ'
}

クラスMyStorage {
  ストレージ: ストレージ

  コンストラクター(型: StorageType) {
    this.storage = type === StorageType.l ? window.localStorage : window.sessionStorage
  }

  セット（
    キー: 文字列、
    値: 任意
  ）{
    定数データ = JSON.stringify(値)
    this.storage.setItem(キー、データ)
  }

  get(キー: 文字列) {
    定数値 = this.storage.getItem(キー)
    if (値) {
      JSON.parse(値)を返す
  }

  削除(キー: 文字列) {
    this.storage.removeItem(キー)
  }

  クリア（） {
    this.storage.clear()
  }
}

const LStorage = 新しい MyStorage(StorageType.l)
const SStorage = 新しい MyStorage(StorageType.s)

エクスポート { LStorage、SStorage }

 './storage' から { LStorage, SStorage } をインポートします

...

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

インターフェースIStoredItem{
  値: 任意
  有効期限: 数値
}
...
セット（
    キー: 文字列、
    値: 任意、
    有効期限: ブール値 | 数値 = false、
  ）{
    const ソース: IStoredItem = { 値: null }
    （期限切れ）の場合{
    // デフォルトの有効期限は1年ですが、実際の状況に応じて調整できます。source.expires =
        新しい日付().getTime() +
        (有効期限 === true ? 1000 * 60 * 60 * 24 * 365 : 有効期限)
    }
    ソース.値 = 値
    const データ = JSON.stringify(ソース)
    this.storage.setItem(キー、データ)
  }
  
  get(キー: 文字列) {
    定数値 = this.storage.getItem(キー)
    if (値) {
      定数ソース: IStoredItem = JSON.parse(値)
      const 有効期限 = source.有効期限
      const now = 新しい Date().getTime()
      if (有効期限 && 現在 > 有効期限) {
        this.delete(キー)
        nullを返す
      }

      ソース値を返す
    }
  }

 'crypto-js' から CryptoJS をインポートします。

定数SECRET_KEY = 'nkldsx@#45#VDss9'
定数 IS_DEV = process.env.NODE_ENV === '開発'
...
クラスMyStorage {
  ...
  
  プライベート暗号化(データ: 文字列) {
    CryptoJS.AES.encrypt(data, SECRET_KEY).toString() を返します。
  }

  プライベート復号化(データ: 文字列) {
    定数バイト = CryptoJS.AES.decrypt(データ、SECRET_KEY)
    bytes.toString(CryptoJS.enc.Utf8) を返します
  }
  
  セット（
    キー: 文字列、
    値: 任意、
    有効期限: ブール値 | 数値 = false、
    暗号化 = true
  ）{
    const ソース: IStoredItem = { 値: null }
    （期限切れ）の場合{
      ソース.有効期限 =
        新しい日付().getTime() +
        (有効期限 === true ? 1000 * 60 * 60 * 24 * 365 : 有効期限)
    }
    ソース.値 = 値
    const データ = JSON.stringify(ソース)
    this.storage.setItem(キー、IS_DEV? データ: 暗号化? this.encrypt(データ): データ
    ）
  }
  
  get(キー: 文字列、暗号化 = true) {
    定数値 = this.storage.getItem(キー)
    if (値) {
      定数ソース: IStoredItem = JSON.parse(値)
      const 有効期限 = source.有効期限
      const now = 新しい Date().getTime()
      if (有効期限 && 現在 > 有効期限) {
        this.delete(キー)
        nullを返す
      }

      IS_DEVを返す
        ? ソース値
        : 暗号化
        ? this.decrypt(ソース.値)
        : ソース.値
    }
  }
  
}

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

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

...
クラスMyStorage {

  // キーを合成
  プライベート合成キー(キー: 文字列) {
    PREFIX + キーを返す
  }
  
  ...
  
 セット（
    キー: 文字列、
    値: 任意、
    有効期限: ブール値 | 数値 = false、
    暗号化 = true
  ）{
    ...
    this.storage.setItem() は、
      this.synthesisKey(キー)、
      IS_DEV ? データ: 暗号化? this.encrypt(data): データ
    ）
  }
  
  get(キー: 文字列、暗号化 = true) {
    定数値 = this.storage.getItem(this.synthesisKey(key))
    ...
  }

}

'crypto-js' から CryptoJS をインポートします
const config = require('../../package.json')

列挙型ストレージタイプ{
  l = 'ローカルストレージ'、
  s = 'セッションストレージ'
}

インターフェースIStoredItem{
  値: 任意
  有効期限: 数値
}

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

クラスMyStorage {
  ストレージ: ストレージ

  コンストラクター(型: StorageType) {
    this.storage =
      タイプ === StorageType.l ? window.localStorage : window.sessionStorage
  }

  プライベート暗号化(データ: 文字列) {
    CryptoJS.AES.encrypt(data, SECRET_KEY).toString() を返します。
  }

  プライベート復号化(データ: 文字列) {
    定数バイト = CryptoJS.AES.decrypt(データ、SECRET_KEY)
    bytes.toString(CryptoJS.enc.Utf8) を返します
  }

  プライベート合成キー(キー: 文字列) {
    PREFIX + キーを返す
  }

  セット（
    キー: 文字列、
    値: 任意、
    有効期限: ブール値 | 数値 = false、
    暗号化 = true
  ）{
    const ソース: IStoredItem = { 値: null }
    （期限切れ）の場合{
      ソース.有効期限 =
        新しい日付().getTime() +
        (有効期限 === true ? 1000 * 60 * 60 * 24 * 365 : 有効期限)
    }
    ソース.値 = 値
    const データ = JSON.stringify(ソース)
    this.storage.setItem() は、
      this.synthesisKey(キー)、
      IS_DEV ? データ: 暗号化? this.encrypt(data): データ
    ）
  }

  get(キー: 文字列、暗号化 = true) {
    定数値 = this.storage.getItem(this.synthesisKey(key))
    if (値) {
      定数ソース: IStoredItem = JSON.parse(値)
      const 有効期限 = source.有効期限
      const now = 新しい Date().getTime()
      if (有効期限 && 現在 > 有効期限) {
        this.delete(キー)
        nullを返す
      }

      IS_DEVを返す
        ? ソース値
        : 暗号化
        ? this.decrypt(ソース.値)
        : ソース.値
    }
  }

  削除(キー: 文字列) {
    this.storage.removeItem(this.synthesisKey(キー))
  }

  クリア（） {
    this.storage.clear()
  }
}

const LStorage = 新しい MyStorage(StorageType.l)
const SStorage = 新しい MyStorage(StorageType.s)

エクスポート { LStorage、SStorage }