web-dev-qa-db-ja.com

一定期間後にHTML5ローカルストレージのアイテムを削除しますか？

現在取り組んでいるシンプルなHTML5アプリがありますが、24時間後にこのアイテムを削除するなど、一定期間後にHTML5ローカルストレージ内のアイテムを削除できるかどうか疑問に思っています。

JavaScriptに組み込まれているDateObjectがおそらく私が必要としているものだと思います。

これは可能ですか？できれば、いくつかのコード例がいいでしょう、ありがとう！

javascripthtmllocal-storage
14
Dropped43

データと一緒に日付を保存できます

//add data we are interested in tracking to an array
var values = new Array();
var oneday = new Date();
oneday.setHours(oneday.getHours() + 24); //one day from now
values.Push("hello world");
values.Push(oneday);
try {
    localStorage.setItem(0, values.join(";"));
} 
catch (e) { }

//check if past expiration date
var values = localStorage.getItem(0).split(";");
if (values[1] < new Date()) {
    localStorage.removeItem(0);
}
15
mrtsherman

これをやりたいのなら、基本的には手動でやらなければならないと思います。たとえば、タイムスタンプを保存している各値と一緒にlocalStorageスロットに保存し、ページの読み込みやsetTimeoutなどの一定の間隔でタイムスタンプを現在の時刻と照合することができます。

例：

//this function sets the value, and marks the timestamp
function setNewVal(prop)
{
    window.localStorage[prop] = Math.random();
    window.localStorage[prop+"timestamp"] = new Date();
}

//this function checks to see which ones need refreshing
function someRucurringFunction()
{
    //check each property in localStorage
    for (var prop in window.localStorage)
    {   //if the property name contains the string "timestamp"
        if (prop.indexOf("timestamp") != -1)
        {   //get date objects
            var timestamp = new Date(window.localStorage[prop]);
            var currentTime = new Date();

            //currently set to 30 days, 12 hours, 1 min, 1s (don't set to 0!)
            var maxAge =    (1000   *   1)  *//s
                            (60     *   1)  *//m
                            (60     *  12)  *//h
                            (24     *  30);  //d

            if ((currentTime - timestamp) > maxAge)
            {//if the property is too old (yes, this really does work!)
                //get the string of the real property (this prop - "timestamp")
                var propString = prop.replace("timestamp","");
                //send it to some function that sets a new value
                setNewVal(propString);
            }
        }
    }
}
//set the loop
window.setInterval(someRucurringFunction,(1000*60*60);

編集：mrtshermanの方法も完全に機能します。同様に、JSON.stringify/parse（）を使用して、保存/取得する可能性のあるオブジェクトのプロパティとしてタイムスタンプを入力できます。配列またはオブジェクトのいずれかが非常に大きい場合、またはそれらが非常に多い場合は、効率を上げるために並列プロパティメソッドを使用することをお勧めします。

1
JKing

このソリューションを使用する：

(function () {

  var lastclear = localStorage.getItem('lastclear'),
      time_now  = (new Date()).getTime();

  // .getTime() returns milliseconds so 1000 * 60 * 60 * 24 = 24 days
  if ((time_now - lastclear) > 1000 * 60 * 60 * 24) {

    localStorage.clear();

    localStorage.setItem('lastclear', time_now);
  }

})();
1
Guy Ytzhak