localStorage
(HTML5のDOMストレージの一部として)保存されているデータはどのくらいの期間利用できますか?ローカルストレージに保存したデータの有効期限を設定できますか?
17 に答える
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
または、これを処理するlocalstorage-slim.js のような軽量のラッパーを使用することもできます。
有効期限の指定はできません。それは完全にユーザー次第です。
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
もちろん、アプリケーションがクライアントに保存したものが後でなくなる可能性もあります。ユーザーは明示的にローカル ストレージを削除できます。そうしないと、ブラウザがスペースの問題に直面する可能性があります。防御的にプログラムするのは良いことです。ただし、一般的には、その言葉の実用的な定義に基づいて、物事は「永遠に」残ります。
編集— 明らかに、自分のアプリケーションが古すぎると判断した場合、積極的に削除することができます。つまり、保存したものにある種のタイムスタンプを明示的に含めることができ、後でそれを使用して、情報をフラッシュするかどうかを決定できます。
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などが役立ちます。
Brynner Ferreira は、有効期限情報が存在する兄弟キーを保存するという良い点をもたらしました。この方法では、大量のキーがある場合、または値が大きな 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;
}
ここでsessionStorageを使用することを強くお勧めします
- localStorageと同じですが、セッションの破棄 / ブラウザの終了時に破棄します
- また、localStorageはタブ間で共有できますが、sessionStorageは現在のタブでのみ使用できますが、値はページの更新やページの変更では変更されません
- sessionStorage は、Cookie に対するネットワーク トラフィックを削減するのにも役立ちます
設定値用
sessionStorage.setItem("key","my value");
値を取得するための使用
var value = sessionStorage.getItem("key");
set のすべての方法は
sessionStorage.key = "my val";
sessionStorage["key"] = "my val";
sessionStorage.setItem("key","my value");
get のすべての方法は
var value = sessionStorage.key;
var value = sessionStorage["key"];
var value = sessionStorage.getItem("key");
ライフサイクルは、アプリケーション/ユーザーによって制御されます。
標準から:
ユーザー エージェントは、セキュリティ上の理由から、またはユーザーから要求された場合にのみ、ローカル ストレージ領域からのデータを期限切れにする必要があります。ユーザー エージェントは、データにアクセスする可能性のあるスクリプトが実行されている間は、常にデータを削除しないようにする必要があります。
W3C ドラフトから:
ユーザー エージェントは、セキュリティ上の理由から、またはユーザーから要求された場合にのみ、ローカル ストレージ領域からのデータを期限切れにする必要があります。ユーザー エージェントは、データにアクセスする可能性のあるスクリプトが実行されている間は、常にデータを削除しないようにする必要があります。
setItem(key, value); を使用してスケジュールの更新を行う必要があります。指定されたキーを新しいデータで追加または更新します。
// 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); }
}
If someone using jStorage Plugin of jQuery the it can be add expiry with setTTL function if jStorage plugin
$.jStorage.set('myLocalVar', "some value");
$.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr.
angular と 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) です。ページ セッションは、ブラウザーが開いている限り持続し、ページのリロードや復元後も存続します。新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されます。
検索者の利益のために:
Fernando のように、格納されている値が単純な場合に json の負荷を追加したくありませんでした。UI インタラクションを追跡し、データの関連性を維持する必要がありました (たとえば、チェックアウト前にユーザーがどのように e コマース サイトを使用したかなど)。
これはすべての人の基準を満たすわけではありませんが、うまくいけば、誰かが簡単にコピーして貼り付けを開始し、別のライブラリを追加する手間を省くことができます。
注: アイテムを個別に取得する必要がある場合、これは適切ではありません。
// 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]);
}
}