LocalStorage は手動でクリアしない限り、常にブラウザーに保存されます。ただし、多くの場合、localStorage には有効期限が必要になる場合があります。たとえば、ユーザー認証トークンをクライアントに保存すると、有効期限は 1 週間になります。 、1週間を超えた場合は再度ログインしてください。この要件を実現するにはどうすればよいですか?
localStorage 自体は有効期限メカニズムを提供していないことを知っておく必要があります。この場合、そのようなメソッドをプロトタイプに直接追加するしかありません。
Storage.prototype.setExpire=(キー,値,期限切れ) =>{ };Storage.setExpire(キー,値,期限切れ);有効期限を切れるには、値を設定するときに現在の時刻を記録し、値を取得するときに、現在の時刻と前回の時刻の差が一定の範囲内であるかどうかを判断するという考えです。範囲外の場合は、現在の項目をクリアして null を返します。
値に時間を追加するには、形式を定義する必要があります
Storage.prototype.setExpire=(キー, 値, 期限切れ) =>{ let obj={ データ:値, 時刻:Date.now(), 期限切れ:期限切れ }; localStorage.setItem(key,JSON.stringify(obj)) ;}次の 3 つのフィールドが含まれます
localStorage によって設定された値はオブジェクトにできないため、ここでは JSON.stringify メソッドを使用して値を文字列に変換し、使用時に元に戻す必要があります。
次に、取得するメソッドを追加します。
Storage.prototype.getExpire= key =>{ let val =localStorage.getItem(key); if(!val){ return val; } val =JSON.parse(val); >val.expire){localStorage.removeItem(key)} 戻り値 val.data;}まずはテストしてみましょう
localStorage.setExpire(token,'xxxxxx',5000);window.setInterval(()=>{ console.log(localStorage.getExpire(token));},1000)基本的に、私たちの考え方は、期限切れのアイテムを定期的にクリーンアップするのではなく、アイテムを取得したときに期限切れかどうかを判断し、期限切れの場合はアイテムをクリアするというものです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。