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クエリ文の書き順と実行順を詳しく解説
目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....
CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...
この記事では、例を使用して MySQL カーソルの原理と使用方法を説明します。ご参考までに、詳細は以...
すべてのタグは小文字でなければなりませんXHTML では、すべてのタグは小文字でなければなりません。...
今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...
長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...
1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...
SQLはテーブル内の重複レコードをすべて見つけます1. テーブルには id と name の 2 つ...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...
突然、ドキュメントの保存と共同作業のためのプライベート サービスを構築する必要がありました。多くの場...
ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...
この記事では、例を挙げて mysql show 操作について説明します。ご参考までに、詳細は以下の通...
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
プロジェクトドキュメントディレクトリDiv+CSS 命名規則 - 4 - Div+css 命名規則 ...