HTML5 ローカル ストレージ内のアイテムはいつ期限切れになりますか?
-
22-09-2019 - |
質問
localStorage (HTML5 の DOM Storage の一部として) に保存されたデータはどのくらいの期間利用できますか?localStorage に保存したデータの有効期限を設定できますか?
解決
これは、有効期限を指定することはできません。これは完全にユーザーにあります。
https://developer.mozilla.org/en-米国/ドキュメント/ウェブ/ API /ウィンドウ/のlocalStorageする
もちろん、それはクライアント上で何かアプリケーションストアが、後がないかもしれない可能性があります。ユーザーが明示的にローカルストレージを取り除くことができ、またはブラウザがスペースの考慮に実行されることがあります。それは守備プログラムに良いことです。一般しかし、物事には、その単語のいくつかの実用的な定義に基づいて、「永遠に」残っています。
の編集の - それはそれはあまりにも古いです決定した場合、明らかに、独自のアプリケーションを積極的にものを削除することができます。それはあなたが保存されて持っているもので、タイムスタンプのいくつかの並べ替えを含み、そしてその情報をフラッシュする必要があるかどうかを決定するために、後でそれを使用して明示的にすることができ、あるます。
他のヒント
私はのオブジェクトの中に格納するタイムスタンプにお勧めしますのlocalStorage
に保存しますvar object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));
あなたは、オブジェクトを解析し、タイムスタンプを取得し、現在の日付と比較し、必要に応じて、オブジェクトの値を更新することができます。
var object = JSON.parse(localStorage.getItem("key")),
dateString = object.timestamp,
now = new Date().getTime().toString();
compareTime(dateString, now); //to implement
あなたは lscache に使用することができます。これは、ストレージサイズが制限を超えてインスタンスを含め、自動的にあなたのためにこれを処理します。その場合、それは彼らの指定された期限に最も近い項目を剪定始まります。
readme
から:
lscache.set
Stores the value in localStorage. Expires after specified number of minutes.
Arguments
key (string)
value (Object|string)
time (number: optional)
これは、通常の保存方法との唯一の本当の違いです。 、取得、削除、など同じように機能します。
あなたはその多くの機能を必要としない場合、あなたは、単に(JSON経由)値とタイムスタンプを保存し、有効期限のためにそれを確認することができます。
注目すべきは、ローカルストレージはユーザーに任されている正当な理由があります。あなたは非常に一時的にデータを保存する必要がある場合でも、lscacheのようなものが便利になるん。
ブリンナー・フェレイラ氏は次のような良い点を指摘しました。有効期限情報が存在する兄弟キーを保存します。こちらです、 大量のキーがある場合、または値が大きな Json オブジェクトである場合, 、タイムスタンプにアクセスするためにそれらを解析する必要はありません。
以下は改良版です。
/* removeStorage: removes a key from localStorage and its sibling expiracy key
params:
key <string> : localStorage key to remove
returns:
<boolean> : telling if operation succeeded
*/
function removeStorage(name) {
try {
localStorage.removeItem(name);
localStorage.removeItem(name + '_expiresIn');
} catch(e) {
console.log('removeStorage: Error removing key ['+ key + '] from localStorage: ' + JSON.stringify(e) );
return false;
}
return true;
}
/* getStorage: retrieves a key from localStorage previously set with setStorage().
params:
key <string> : localStorage key
returns:
<string> : value of localStorage key
null : in case of expired key or failure
*/
function getStorage(key) {
var now = Date.now(); //epoch time, lets deal only with integer
// set expiration for storage
var expiresIn = localStorage.getItem(key+'_expiresIn');
if (expiresIn===undefined || expiresIn===null) { expiresIn = 0; }
if (expiresIn < now) {// Expired
removeStorage(key);
return null;
} else {
try {
var value = localStorage.getItem(key);
return value;
} catch(e) {
console.log('getStorage: Error reading key ['+ key + '] from localStorage: ' + JSON.stringify(e) );
return null;
}
}
}
/* setStorage: writes a key into localStorage setting a expire time
params:
key <string> : localStorage key
value <string> : localStorage value
expires <number> : number of seconds from now to expire the key
returns:
<boolean> : telling if operation succeeded
*/
function setStorage(key, value, expires) {
if (expires===undefined || expires===null) {
expires = (24*60*60); // default: seconds for 1 day
} else {
expires = Math.abs(expires); //make sure it's positive
}
var now = Date.now(); //millisecs since epoch time, lets deal only with integer
var schedule = now + expires*1000;
try {
localStorage.setItem(key, value);
localStorage.setItem(key + '_expiresIn', schedule);
} catch(e) {
console.log('setStorage: Error setting key ['+ key + '] in localStorage: ' + JSON.stringify(e) );
return false;
}
return true;
}
ローカルストレージが有効期限のメカニズムを提供していませんが、クッキーを行います。単にクッキーとローカルストレージ・キーをペアリングすると、ローカルストレージは、クッキーと同じ有効期限のパラメータで更新することができることを確保するための簡単な方法を提供します。
jQueryの中に例:
if (!$.cookie('your_key') || !localStorage.getItem('your_key')) {
//get your_data from server, then...
localStorage.setItem('your_key', 'your_data' );
$.cookie('your_key', 1);
} else {
var your_data = localStorage.getItem('your_key');
}
// do stuff with your_data
この例では、ブラウザを閉じたときに期限切れにデフォルトパラメータを使用してクッキーを設定します。ブラウザを閉じて再オープンしたときしたがって、your_dataのためのローカル・データ・ストアは、サーバー側の呼び出しによってリフレッシュされます。
これはのとまったく同じではないこと注
のローカルデータストアを削除するクッキーの有効期限が切れるたび、それは代わりに、ローカル・データ・ストアを更新しています。あなたの主な目標は、以上の4Kクライアント側(クッキーのサイズ制限)を格納できるようにすることである場合には、クッキーとローカルストレージのこのペアは、クッキーと同じ有効期限のパラメータを使用して、より大きなストレージサイズを達成するためのお手伝いをしますます。ここでの使用を強くお勧めします セッションストレージ
- それは同じです ローカルストレージ ただし、セッションが破棄されたときやブラウザが閉じられたときに破棄されます
- sessionStorage は、Cookie に対するネットワーク トラフィックを削減するのにも役立ちます。
設定値用
sessionStorage.setItem("key","my value");
値の取得に使用します
var value = sessionStorage.getItem("key");
セットのすべての方法は
sessionStorage.key = "my val";
sessionStorage["key"] = "my val";
sessionStorage.setItem("key","my value");
取得するためのすべての方法は
var value = sessionStorage.key;
var value = sessionStorage["key"];
var value = sessionStorage.getItem("key");
のライフサイクルは、アプリケーション/ユーザによって制御されます。
標準のから:
ユーザーエージェントは、ユーザーがそうするように要求されたセキュリティ上の理由またはときのためにローカル記憶領域からデータを期限切れにする必要があります。ユーザーエージェントは、常に、そのデータにアクセスすることができ、スクリプトの実行中にデータを削除することは避けてください。
ユーザーエージェントは、ユーザーがそうするように要求されたセキュリティ上の理由またはときのためにローカル記憶領域からデータを期限切れにする必要があります。ユーザーエージェントは、常に、そのデータにアクセスすることができ、スクリプトの実行中にデータを削除することは避けてください。
あなたはSetItem関数(キー、値)を使用して、あなたのスケジュールにあなたの更新を行うことになるでしょう。それは、どちらかの新しいデータで与えられたキーを追加または更新されます。
// Functions
function removeHtmlStorage(name) {
localStorage.removeItem(name);
localStorage.removeItem(name+'_time');
}
function setHtmlStorage(name, value, expires) {
if (expires==undefined || expires=='null') { var expires = 3600; } // default: 1h
var date = new Date();
var schedule = Math.round((date.setSeconds(date.getSeconds()+expires))/1000);
localStorage.setItem(name, value);
localStorage.setItem(name+'_time', schedule);
}
function statusHtmlStorage(name) {
var date = new Date();
var current = Math.round(+date/1000);
// Get Schedule
var stored_time = localStorage.getItem(name+'_time');
if (stored_time==undefined || stored_time=='null') { var stored_time = 0; }
// Expired
if (stored_time < current) {
// Remove
removeHtmlStorage(name);
return 0;
} else {
return 1;
}
}
// Status
var cache_status = statusHtmlStorage('cache_name');
// Has Data
if (cache_status == 1) {
// Get Cache
var data = localStorage.getItem('cache_name');
alert(data);
// Expired or Empty Cache
} else {
// Get Data
var data = 'Pay in cash :)';
alert(data);
// Set Cache (30 seconds)
if (cache) { setHtmlStorage('cache_name', data, 30); }
}
それはsetTTL機能と有効期限を追加することができます
$.jStorage.set('myLocalVar', "some value");
$.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr.
誰もがまだ迅速な解決策を探しているとjQueryなど、私のような依存関係がローカル/セッション/カスタムストレージへの追加の有効期限は、あなたがここにソースでそれを見つけることができるというミニlibが書いたくない場合:
回避策は、角度とlocalforageを使用して
angular.module('app').service('cacheService', function() {
return {
set: function(key, value, expireTimeInSeconds) {
return localforage.setItem(key, {
data: value,
timestamp: new Date().getTime(),
expireTimeInMilliseconds: expireTimeInSeconds * 1000
})
},
get: function(key) {
return localforage.getItem(key).then(function(item) {
if(!item || new Date().getTime() > (item.timestamp + item.expireTimeInMilliseconds)) {
return null
} else {
return item.data
}
})
}
}
})
@ sebarmeliのアプローチは、私の意見では最高ですが、あなただけのデータがセッションの生活のために存続したいならば、sessionStorage
は、おそらくより良いオプションです。
これは記憶領域を保持し、グローバルオブジェクト(のsessionStorage)であります それは、ページセッションの間利用可能です。ページのセッション ブラウザが開いて長いがあるようとして持続し、ページの上に生き残ります リロードおよびリストア。新しいタブやウィンドウでページを開くと発生します 新しいセッションが開始される。
のようにフェルナンドは、私が格納された値は単純だったときJSONの負荷を追加したくありませんでした。私はいくつかのUIのインタラクションを追跡し、関連データを維持するために必要な(例えば、ユーザがチェックアウトする前に、eコマースサイトを使用する方法)。
これはeveryonesの基準を満たしていませんが、うまくいけば、クイックコピー+は、誰かのために、別のlibを追加保存スターターを貼り付けされます。
注:あなたが個別にアイテムを取得する必要がある場合、これは良いことではないでしょう。
// Addition
if(window.localStorage){
localStorage.setItem('myapp-' + new Date().getTime(), 'my value');
}
// Removal of all expired items
if(window.localStorage){
// two mins - (1000 * 60 * 20) would be 20 mins
var expiryTime = new Date().getTime() - (1000 * 60 * 2);
var deleteRows = [];
for(var i=0; i < localStorage.length; i++){
var key = localStorage.key(i);
var partsArray = key.split('-');
// The last value will be a timestamp
var lastRow = partsArray[partsArray.length - 1];
if(lastRow && parseInt(lastRow) < expiryTime){
deleteRows.push(key);
}
}
// delete old data
for(var j=0; j < deleteRows.length; j++){
localStorage.removeItem(deleteRows[j]);
}
}
あなたはこれを試すことができます。
var hours = 24; // Reset when storage is more than 24hours
var now = new Date().getTime();
var setupTime = localStorage.getItem('setupTime');
if (setupTime == null) {
localStorage.setItem('setupTime', now)
} else {
if(now-setupTime > hours*60*60*1000) {
localStorage.clear()
localStorage.setItem('setupTime', now);
}
}