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つの属性値の詳細解説(面接の質問)

推薦する

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

CSSレイアウトにおけるフロート属性と位置属性の違い

CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...

MySQL カーソルの原理と使用例の分析

この記事では、例を使用して MySQL カーソルの原理と使用方法を説明します。ご参考までに、詳細は以...

xHTML タグと HTML タグの違いは何ですか?

すべてのタグは小文字でなければなりませんXHTML では、すべてのタグは小文字でなければなりません。...

ブリージングカルーセルを実装するネイティブJS

今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

1 つ以上のフィールドに基づいて重複データを検索する MySQL SQL ステートメント

SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)

PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...

Dockerはnextcloudを使用してプライベートBaiduクラウドディスクを構築します

突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

mysql 簡単な操作例を表示

この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

CSS XTHML の記述標準とよくある問題の概要 (ページ最適化)

プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...