localStorageの有効期限を設定するいくつかの方法

localStorageの有効期限を設定するいくつかの方法

localStorage といえば、フロントエンドに詳しい人なら誰でも知っているはずです。localStorage が提供する getItem、setItem、removeItem、clear の各 API を使用すると、ブラウザにローカルに保存されたデータに対して「読み取り、書き込み、削除」の操作を簡単に実行できます。ただし、cookie と比較すると、localStorage の唯一の欠点は「各キーの有効期限を設定できない」ことです。

localStorage プロパティを使用すると、ドキュメントの元のオブジェクト ストレージにアクセスできます。保存されたデータはブラウザー セッションに保存されます。 localStorage は sessionStorage に似ていますが、違いは localStorage に保存されたデータは長期間保持できることです。ページ セッションが終了すると、つまりページが閉じられると、sessionStorage に保存されたデータはクリアされます。

また、localStorage 内のキーと値のペアは常に文字列として保存されることにも注意してください。

問題の説明

実際のアプリケーション シナリオでは、localStorage に設定された特定の「キー」を指定された時間内に自動的に無効にする必要があることがよくあります。このシナリオに基づいて、どのように解決すればよいでしょうか。

1. 基本的な解決策

フロントエンドに詳しい人なら、すぐに答えが返ってくるかもしれません。

localStorage.setItem('dooring', '1.0.0')
// 有効期間を 1 時間に設定します。const expire = 1000 * 60 * 60;
タイムアウトを設定する(() => {
  localStorage.setItem('dooring', '')
}、 期限切れ)

もちろん、このソリューションは一時的に問題を解決できますが、任意のキーの有効期間を設定する場合は、このソリューションを使用して複数のタイマーを記述する必要があります。これは、「メンテナンス コストが非常に高く、エンジニアリングの再利用には役立ちません」。

2. 中間的な解決策

フロントエンドエンジニアは、ある程度の実務経験を積むと、エンジニアリングと再利用性の問題を考慮することが多くなり、データ構造についてもある程度理解するため、次のような解決策を思いつくことがあります。

  • **「localStorage**」を使用して、{key(キー): expire(有効期限)}のマッピングテーブルを保存します。
  • **「localStorage API」** を書き直し、メソッドを 2 回カプセル化します。

同様のコードは次のとおりです。

定数ストア = {
  //有効期限マップを保存する setExpireMap: (key, expire) => {
    const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}"
    ローカルストレージ.setItem()
      'EXPIRE_MAP', 
      JSON.stringify({
      ...JSON.parse(expireMap)、
      キー: 有効期限
    }))
  },
  setItem: (キー、値、有効期限) => {
    store.setExpireMap(キー、有効期限)
    localStorage.setItem(キー、値)
  },
  getItem: (キー) => {
    // 値を取得する前に期限切れかどうかを判定する const expireMap = JSON.parse(
      localStorage.getItem('EXPIRE_MAP') || "{}"
    )
    if(expireMap[key] && expireMap[key] < Date.now()) {
      localStorage.getItem(キー) を返す
    }それ以外 {
      localStorage.removeItem(キー)
      nullを返す
    }
  }
  // ...
}

一見すると、このソリューションは再利用性の問題を解決し、さまざまなチームがこのソリューションを使用できますが、それでもいくつかの欠点があります。

  • ストアを操作する場合、データのコピーを2つ維持する必要があり、キャッシュスペースが占有される
  • EXPIRE_MAP を誤って削除すると、すべての有効期限が無効になります。
  • 操作プロセス(操作ステータス、操作コールバックなど)に対するより柔軟な制御が不足しています。

3. 高度なソリューション

メンテナンスコストとスペース使用量を削減し、特定の柔軟な制御とフォールトトレランス機能をサポートするには、何をすべきでしょうか?
ここで私は 2 つの類似した解決策を思いつきます。

  1. キーに有効期限を格納します(例:dooring|6000)。値を取得するたびに、区切り文字「|」を使用してキーと有効期限を取り出し、判断します。
  2. 有効期限を1.0.0|6000などの値に保存し、残りは1と同じになります。

カプセル化と信頼性を高めるために、さまざまな状態でコールバックを構成することもできます。これは次のように簡単に実装できます。

定数ストア = {
  preId: 'xi-',
  タイムサイン: '|-door-|',
  状態: {
    成功: 0,
    失敗: 1、
    オーバーフロー: 2,
    タイムアウト: 3,
  },
  ストレージ: localStorage || window.localStorage,
  getKey: 関数 (キー: 文字列) {
    this.preId + キーを返します。
  },
  設定: 関数 (
    キー: 文字列、
    値: 文字列 | 数値、
    時間?: 日付と番号、
    cb?: (ステータス: 数値、キー: 文字列、値: 文字列 | 数値) => void、
  ){
    _status = this.status.SUCCESS とします。
      _key = this.getKey(キー)、
      _時間;
    // 有効期限を設定します。時間が設定されていない場合は、デフォルトで 1 か月になります。try {
      _time = 時間
        ? 新しい Date(time).getTime() || time.getTime()
        : 新しいDate().getTime() + 1000 * 60 * 60 * 24 * 31;
    } キャッチ (e) {
      _time = 新しい Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    }
    試す {
      this.storage.setItem(_key、_time + this.timeSign + 値);
    } キャッチ (e) {
      _status = this.status.OVERFLOW;
    }
    cb && cb.call(this、_status、_key、値);
  },
  取得: 関数 (
    キー: 文字列、
    cb?: (ステータス: 数値、値: 文字列 | 数値 | null) => void、
  ){
    ステータスを this.status.SUCCESS とします。
      _key = this.getKey(キー)、
      値 = null、
      timeSignLen = this.timeSign.length、
      それ = これ、
      索引、
      時間、
      結果;
    試す {
      値 = that.storage.getItem(_key);
    } キャッチ (e) {
      結果 = {
        ステータス: that.status.FAILURE、
        値: null、
      };
      cb && cb.call(this、result.status、result.value);
      結果を返します。
    }
    if (値) {
      インデックス = value.indexOf(that.timeSign);
      時間 = +値.スライス(0, インデックス);
      時刻が新しいDate().getTime() の場合、時刻は 0 になります。
        値 = value.slice(インデックス + timeSignLen);
      } それ以外 {
        (値 = null)、(ステータス = that.status.TIMEOUT);
        that.remove(_key);
      }
    } それ以外 {
      ステータス = that.status.FAILURE;
    }
    結果 = {
      ステータス: ステータス、
      値: 値、
    };
    cb && cb.call(this、result.status、result.value);
    結果を返します。
  },
  // ...
};

デフォルトストアをエクスポートします。

このようにして、各キーに独立した有効期限を設定し、さまざまな操作結果のステータスを簡単に制御できるようになります。

4. ハードコアソリューション

もちろん、最善の解決策は、xijs JavaScript ライブラリを直接使用することです。これは、上記の完全な実装をライブラリにカプセル化しているためです。有効期限付きの強力な「localStorage」メソッドを簡単に使用するには、次のソリューションを使用するだけです。

// まずyarn add xijsをインストールします
'xijs' から { store } をインポートします。
// 有効期限付きのキーを設定する
store.set('name', 'dooring', Date.now() + 1000);
console.log(ストア.get('名前'));
タイムアウトを設定する(() => {
  console.log(ストア.get('名前'));
}, 1000);

// 設定成功後のコールバック store.set('dooring', 'xuxiaoxi', Date.now() + 1000, (status, key, value) => {
  console.log('成功');
});

同時に、xijs はビジネス開発の効率化を図るため、より便利なツール機能を継続的に拡張しています。現在、以下のツール機能が統合されています。

  • 「store」 有効期限設定と操作コールバックをサポートするlocalStorage上位層カプセル化に基づくキャッシュライブラリ
  • 「uuid」 ユニークなIDを生成し、長さの設定をサポートします
  • "randomStr" 指定された数のランダムな文字列を生成します
  • 「formatDate」 すぐに使える時間フォーマットツール
  • 「デバウンス」手ぶれ防止機能
  • 「スロットル」スロットル機能
  • 「url2obj」 URL文字列をオブジェクトに変換します
  • 「obj2url」はオブジェクトをエンコードされたURL文字列に変換します
  • 「isPC」 デバイスがPCタイプかどうかを判定します

githubアドレス: https://github.com/MrXujiang/xijs

文書アドレス:h5.dooring.cn/xijs

これで、localStorage の有効期限を設定するいくつかの方法についての記事は終了です。localStorage の有効期限の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • localStorage の保存、読み取り、削除について
  • jsでローカルストレージを操作する方法
  • JavaScript でのローカル ストレージとセッション ストレージの使用
  • localStorage の有効期間と有効期限を設定する簡単な方法
  • この記事では、localStorageの有効期限メカニズムを実装する方法を説明します。
  • localStorageの使い方と注意点をまとめました

<<:  Mysql系SQLクエリ文の書き順と実行順を詳しく解説

>>:  背景属性の8つの属性値の詳細解説(面接の質問)

推薦する

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

docker run 起動パラメータ コマンドを表示する方法 (推奨)

runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...

シームレスなカルーセルを実現するjQueryプラグイン

シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...

MySQL スロークエリログの設定と使用方法のチュートリアル

序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...

MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成

1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

JavaScript のディープコピーの落とし穴

序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...

HTML リスト タグ dl、ul、ol の使用例

コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

Centos6.5 glibc アップグレードプロセスの紹介

目次シナリオ要件glibc バージョンglibcのインストールglibc ソフトリンクシナリオ要件C...

Linux での SSH パスワードフリーログイン設定の詳細な説明

Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...

docker の run/cmd/entrypoint の違いの詳細な説明

Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...