HTML5 yerel depolama alanındaki öğelerin süresi ne zaman dolar?

LocalStorage'da (HTML5'teki DOM Depolama Alanının bir parçası olarak) veriler ne kadar süreyle kullanılabilir? LocalStorage'a koyduğum veriler için bir sona erme süresi ayarlayabilir miyim?

Son kullanma tarihi belirtmek mümkün değildir. Tamamen kullanıcıya kalmış.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Tabii ki, uygulamanızın istemcide depoladığı bir şeyin daha sonra orada olmaması mümkündür. Kullanıcı, yerel depolama alanından açıkça kurtulabilir veya tarayıcı, alanla ilgili olarak dikkat çekebilir. Defansif olarak programlamak iyidir. Bununla birlikte, genellikle, bu kelimenin bazı pratik tanımlarına dayanarak işler "sonsuza dek" kalır.

edit - açıkçası, kendi uygulamanız çok eski olduğuna karar verirse bir şeyleri aktif olarak kaldırabilir. Yani, kaydettiklerinize açıkça bir tür zaman damgası ekleyebilir ve daha sonra bilgileri akıtıp yıkamamaya karar vermek için kullanabilirsiniz.

Zaman damgasını localStorage'da sakladığınız nesneye depolamanızı öneririm

var object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));

Nesneyi ayrıştırabilir, zaman damgasını alabilir ve geçerli Tarih ile karşılaştırabilir ve gerekirse nesnenin değerini güncelleyebilirsiniz.

var object = JSON.parse(localStorage.getItem("key")),
    dateString = object.timestamp,
    now = new Date().getTime().toString();

compareTime(dateString, now); //to implement

Lscache kullanabilirsiniz . Depolama boyutunun sınırı aştığı durumlar da dahil olmak üzere bunu sizin için otomatik olarak yapar. Bu durumda, belirtilen son kullanma tarihine en yakın olan budama öğeleri başlar.

Gönderen readme:

lscache.set

Stores the value in localStorage. Expires after specified number of minutes.

Arguments
key (string)
value (Object|string)
time (number: optional)

Bu, normal depolama yöntemleri arasındaki tek gerçek farktır. Aynı işi alın, kaldırın vb.

Bu kadar işlevselliğe ihtiyacınız yoksa, değeri olan bir zaman damgasını (JSON aracılığıyla) depolayabilir ve süresinin dolup dolmadığını kontrol edebilirsiniz.

Dikkat çekici bir şekilde, yerel depolamanın kullanıcıya bırakılmasının iyi bir nedeni vardır. Ancak, son derece geçici veri depolamanız gerektiğinde lscache gibi şeyler işe yarar.

Brynner Ferreira, iyi bir noktaya geldi: son kullanma bilgilerinin bulunduğu bir kardeş anahtarı saklamak. Bu şekilde, çok sayıda anahtarınız varsa veya değerleriniz büyük Json nesneleriyse , zaman damgasına erişmek için bunları ayrıştırmanıza gerek yoktur.

gelişmiş bir sürümü aşağıda bulabilirsiniz:

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

Yerel depolama bir son kullanma mekanizması sağlamazken, çerezler de sağlar. Bir yerel depolama anahtarını bir çerezle eşleştirmek, yerel depolamanın bir çerezle aynı son kullanma parametreleriyle güncellenebilmesini sağlamak için kolay bir yol sağlar.

JQuery'de örnek:

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

Bu örnek, tarayıcı kapatıldığında sona ermek üzere varsayılan parametreli bir çerez ayarlar. Böylece, tarayıcı kapatılıp yeniden açıldığında, verileriniz için yerel veri deposu bir sunucu tarafı çağrısı tarafından yenilenir.

Bunun yerel veri deposunu kaldırmakla tamamen aynı olmadığını, bunun yerine çerezin süresi dolduğunda yerel veri deposunu güncellediğini unutmayın. Bununla birlikte, ana hedefiniz 4K'dan fazla istemci tarafı (çerez boyutu için sınırlama) depolayabiliyorsa, bu çerez ve yerel depolamanın eşleştirilmesi, çerezle aynı süre sonu parametrelerini kullanarak daha büyük bir depolama boyutu elde etmenize yardımcı olacaktır. .

Burada sessionStorage kullanılması şiddetle tavsiye edilir

• localStorage ile aynıdır, ancak oturum yok edildiğinde / tarayıcı kapatıldığında yok edin
• Ayrıca , sessionStorage yalnızca geçerli sekmede kullanılabilirken localStorage sekmeler arasında paylaşabilir , ancak yenileme sayfasında veya sayfadaki değer değişmez
• sessionStorage, çerezlere karşı ağ trafiğini azaltmak için de yararlıdır

ayarlı değer kullanımı için

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

değer elde etmek için

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

api görüntülemek için buraya tıklayın

set için tüm yollar

  sessionStorage.key = "my val";
  sessionStorage["key"] = "my val";
  sessionStorage.setItem("key","my value");

almak için tüm yollar

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

Yaşam döngüsü uygulama / kullanıcı tarafından kontrol edilir.

Gönderen standardı :

Kullanıcı aracıları, yalnızca güvenlik nedenleriyle veya kullanıcı tarafından talep edildiğinde yerel depolama alanlarından veri süresinin dolması gerekir. Kullanıcı aracıları, bu verilere erişebilecek bir komut dosyası çalışırken verileri silmekten daima kaçınmalıdır.

W3C taslağından:

Kullanıcı aracıları, yalnızca güvenlik nedenleriyle veya kullanıcı tarafından talep edildiğinde yerel depolama alanlarından veri süresinin dolması gerekir. Kullanıcı aracıları, bu verilere erişebilecek bir komut dosyası çalışırken verileri silmekten daima kaçınmalıdır.

SetItem (anahtar, değer) kullanarak güncellemelerinizi planlamanızda yapmak isteyeceksiniz; verilen anahtarı yeni verilerle ekler veya günceller.

// 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 Eklentisi kullanan biri varsa, jStorage eklentisi varsa setTTL fonksiyonu ile süre sonu eklenebilir

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

Herkes hala hızlı bir çözüm arıyor ve jquery vb gibi bağımlılıklar istemiyorsanız, ben yerel / oturum / özel depolama sona erme eklemek bir mini lib yazdı, burada kaynak ile bulabilirsiniz:

https://github.com/RonenNess/ExpiredStorage

Bunu deneyebilirsiniz.

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

Açısal ve yerel yem kullanarak geçici çözüm:

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'nin yaklaşımı bence en iyisidir, ancak verilerin yalnızca bir oturumun ömrü boyunca devam etmesini istiyorsanız sessionStoragemuhtemelen daha iyi bir seçenektir:

Bu, sayfa oturumu boyunca kullanılabilir bir depolama alanını koruyan genel bir nesnedir (sessionStorage). Bir sayfa oturumu, tarayıcı açık olduğu sürece devam eder ve sayfaların yeniden yüklenmesi ve geri yüklenmesi sırasında hayatta kalır. Bir sayfayı yeni bir sekmede veya pencerede açmak yeni bir oturumun başlatılmasına neden olur.

MDN: sessionStorage

Arama yapanların yararına:

Fernando gibi, depolanan değerler basit olduğunda bir yük json eklemek istemedim. Sadece bazı kullanıcı arayüzü etkileşimini izlemem ve verileri alakalı tutmam gerekiyordu (örneğin, kullanıcının kontrol etmeden önce bir e-ticaret sitesini nasıl kullandığı).

Bu, herkesin ölçütlerini karşılamayacak, ancak umarım birisi için hızlı bir kopyala + yapıştır başlatıcı olacak ve başka bir lib ekleyerek kaydedecektir.

NOT: Öğeleri ayrı ayrı almanız gerekirse bu iyi olmaz.

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

Tarayıcılar locaStorage nesnesine aşina iseniz , bir son kullanma süresi sağlamak için herhangi bir hüküm olmadığını bilirsiniz. Bununla birlikte, belirli bir süre geçtikten sonra locaStorage'daki öğeleri geçersiz kılmak için bir TTL (yaşamak için zaman) eklemek için Javascript'i kullanabiliriz.

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