HTML5ローカルストレージのアイテムはいつ期限切れになりますか？

（HTML5のDOMストレージの一部として）localStorageに保存されているデータはどのくらいの期間利用できますか？localStorageに入れたデータの有効期限を設定できますか？

有効期限を指定することはできません。それは完全にユーザー次第です。

https://developer.mozilla.org/en-US/docs/Web/API/Window/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のようなものが役に立ちます。

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;
}

ローカルストレージは有効期限メカニズムを提供しませんが、Cookieは提供します。ローカルストレージキーとCookieをペアにするだけで、ローカルストレージをCookieと同じ有効期限パラメーターで更新できることを簡単に確認できます。

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

この例では、ブラウザーが閉じられたときに、デフォルトのパラメーターでCookieが期限切れになるように設定します。したがって、ブラウザを閉じて再度開くと、your_dataのローカルデータストアがサーバー側の呼び出しによって更新されます。

これはローカルデータストアを削除することとまったく同じではなく、Cookieの有効期限が切れるたびにローカルデータストアを更新することに注意してください。ただし、主な目標が4Kを超えるクライアント側（Cookieサイズの制限）を格納できるようにすることである場合、Cookieとローカルストレージのこのペアは、Cookieと同じ有効期限パラメーターを使用して、より大きなストレージサイズを達成するのに役立ちます。

ここでsessionStorageを使用することを強くお勧めします

• localStorageと同じが、セッションが破棄されたとき、またはブラウザが閉じたときに破棄さ
• またのlocalStorageは、タブ間で共有することができますしばらくのsessionStorageは現在のタブでのみ使用できますが、ページの更新やページの変更で値は変更されません
• sessionStorageは、Cookieに対するネットワークトラフィックを減らすのにも役立ちます。

設定値用

sessionStorage.setItem("key","my value");

値を取得するため

var value = sessionStorage.getItem("key");

ビューAPIについては、ここをクリックしてください

セットのすべての方法は

  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");

ライフサイクルは、アプリケーション/ユーザーによって制御されます。

標準から：

ユーザーエージェントは、セキュリティ上の理由またはユーザーから要求された場合にのみ、ローカルストレージ領域のデータを期限切れにする必要があります。ユーザーエージェントは、データにアクセスできるスクリプトが実行されている間は、常にデータを削除しないようにする必要があります。

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); }

}

jQueryのjStorageプラグインを使用している場合、jStorageプラグインの場合、setTTL関数で有効期限を追加できます。

$.jStorage.set('myLocalVar', "some value");
$.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr.

誰かがまだ迅速な解決策を探していて、jqueryなどの依存関係を望まない場合は、ローカル/セッション/カスタムストレージに有効期限を追加するミニlibを作成しました。

https://github.com/RonenNess/ExpiredStorage

あなたはこれを試すことができます。

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);
    }
}

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）です。ページセッションは、ブラウザが開いている限り継続し、ページの再読み込みと復元後も存続します。新しいタブまたはウィンドウでページを開くと、新しいセッションが開始されます。

MDN：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]);
    }
}

ブラウザーのlocaStorageオブジェクトに慣れている場合は、有効期限を提供するための規定がないことがわかります。ただし、Javascriptを使用してTTL（存続可能時間）を追加し、一定の時間が経過した後にlocaStorageのアイテムを無効にすることができます。

function setLocalStorage(key, value, ttl) {
    // `item` is an object which contains the original value
    // as well as the time when it's supposed to expire
    const item = {
        value: value,
        expiry: ttl <= 0 ? -1 : new Date().getTime() + ttl
    };
    localStorage.setItem(key, JSON.stringify(item));
}

function getLocalStorage(key) {
    const itemStr = localStorage.getItem(key);
    // if the item doesn't exist, return null
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    // compare the expiry time of the item with the current time
    if (item.expiry > 0 && new Date().getTime() > item.expiry) {
        // If the item is expired, delete the item from storage
        // and return null
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}