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. 中間的な解決策フロントエンドエンジニアは、ある程度の実務経験を積むと、エンジニアリングと再利用性の問題を考慮することが多くなり、データ構造についてもある程度理解するため、次のような解決策を思いつくことがあります。
同様のコードは次のとおりです。 定数ストア = { //有効期限マップを保存する 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を返す } } // ... } 一見すると、このソリューションは再利用性の問題を解決し、さまざまなチームがこのソリューションを使用できますが、それでもいくつかの欠点があります。
3. 高度なソリューションメンテナンスコストとスペース使用量を削減し、特定の柔軟な制御とフォールトトレランス機能をサポートするには、何をすべきでしょうか?
カプセル化と信頼性を高めるために、さまざまな状態でコールバックを構成することもできます。これは次のように簡単に実装できます。 定数ストア = { 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 はビジネス開発の効率化を図るため、より便利なツール機能を継続的に拡張しています。現在、以下のツール機能が統合されています。
githubアドレス: https://github.com/MrXujiang/xijs 文書アドレス:h5.dooring.cn/xijs これで、localStorage の有効期限を設定するいくつかの方法についての記事は終了です。localStorage の有効期限の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Mysql系SQLクエリ文の書き順と実行順を詳しく解説
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...
シームレス カルーセルは非常に一般的なエフェクトであり、ロジックを理解すれば非常に簡単です。効果は以...
序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...
1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...
結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...
設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...
序文以前、ある会社の面接に行ったとき、面接官から「オブジェクトを深くコピーするにはどうすればよいです...
コードをコピーコードは次のとおりです。 <!--リストタグ: <dl>: 階層リス...
序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...
目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...
目次シナリオ要件glibc バージョンglibcのインストールglibc ソフトリンクシナリオ要件C...
Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...
Dockerfile では、run、cmd、entrypoint はすべてコマンドを実行するために使...
目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...