自行過期LocalStorage記錄

Question

使用自助過期時間戳設置LocalStorage記錄時出現問題，以避免向我的服務器發送大量查詢。我有一個動態內容div：

<div id="storage"><p>Dynamic content</p></div> 

並且想將其內容添加到我的localStorage 5分鐘。如果此記錄不到5分鐘，我不想從服務器獲取內容，並從localStorage中獲取保存的內容。但是，如果它大於5分鐘，那麼localStorage記錄應該被刪除，新的內容應該從服務器中取出並保存爲新記錄。看下面我的jQuery代碼：

$(function() { 
    function now() { 
     return +new Date 
    } 
    var db = window.db = { 
     get: function (key) { 
      var entry = JSON.parse(localStorage.getItem(key) || "0"); 
      if (!entry) return null; 
      if (entry.ttl && entry.ttl + entry.now < now()) { 
       localStorage.removeItem(key); 
       return null; 
      } 
      return entry.value; 
     }, 
     set: function (key, value, ttl) { 
      localStorage.setItem(key, JSON.stringify({ 
       ttl: ttl || 0, 
       now: now(), 
       value: value 
      })); 
     } 
    }; 
}); 

$(function() { 
    // Set Value with TTL of 50 Secionds using Milliseconds. 
    db.set("homeStorage", $("#storage").html(), 50000); 
}); 

$(function() { 
    var contentsOfNews = db.get("homeStorage"); 
    $("#storage").html(contentsOfNews); 
}); 

目前它設置的內容每一次更新的內容。

請在這裏看到的jsfiddle：http://jsfiddle.net/owvtauuj/

只是嘗試手動更新的div＃存儲的內容，明白我的意思。

Answer 1

我通過添加一個屬性保存期滿時間解決了這個問題。

也許你可以試試這個web-storage-cache

var defaultSerializer = { 
 
     serialize: function (item) { 
 
      return JSON.stringify(item); 
 
     }, 
 
     // fix for "illegal access" error on Android when JSON.parse is 
 
     // passed null 
 
     deserialize: function (data) { 
 
      return data && JSON.parse(data); 
 
     } 
 
    }; 
 

 
function _getExpiresDate (expires, now) { 
 
     now = now || new Date(); 
 

 
     if (typeof expires === 'number') { 
 
      expires = expires === Infinity ? 
 
      _maxExpireDate : new Date(now.getTime() + expires * 1000); 
 
     } else if (typeof expires === 'string') { 
 
      expires = new Date(expires); 
 
     } 
 

 
     if (expires && !_isValidDate(expires)) { 
 
      throw new Error('`expires` parameter cannot be converted to a valid Date instance'); 
 
     } 
 

 
     return expires; 
 
    } 
 

 
function _isValidDate (date) { 
 
     return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime()); 
 
    } 
 

 
function _extend (obj, props) { 
 
     for (var key in props) obj[key] = props[key]; 
 
     return obj; 
 
    } 
 

 
// item Constructor 
 

 
function CacheItemConstructor (value, exp) { 
 
    // createTime 
 
    this.c = (new Date()).getTime(); 
 
    exp = exp || _maxExpireDate; 
 
    var expires = _getExpiresDate(exp); 
 
    // expiresTime 
 
    this.e = expires.getTime(); 
 
    this.v = value; 
 
} 
 

 
function expiresSet(key, val, options) { 
 

 
      if (typeof key !== 'string') { 
 
       console.warn(key + ' used as a key, but it is not a string.'); 
 
       key = String(key); 
 
      } 
 

 
      options = _extend({force: true}, options); 
 

 
      if (val === undefined) { 
 
       return this.delete(key); 
 
      } 
 

 
      var value = defaultSerializer.serialize(val); 
 

 
      var cacheItem = new CacheItemConstructor(value, options.exp); 
 
      
 
      localStorage.setItem(key, defaultSerializer.serialize(cacheItem)); 
 
      
 
     } 
 

 
// get Item 
 

 
function expiresGet(key) { 
 
     var cacheItem = defaultSerializer.deserialize(localStorage.getItem(key)); 
 
     if(cacheItem != null) { 
 
      var timeNow = (new Date()).getTime(); 
 
      if(timeNow < cacheItem.e) { 
 
       var value = cacheItem.v; 
 
       return defaultSerializer.deserialize(value); 
 
      } else { 
 
       localStorage.removeItem(key); 
 
      } 
 
     } 
 
     return null; 
 
} 
 

 

 
// Test 
 
expiresSet('mykey', {name: 'tim', age: 10}, {exp: 5}); 
 

 
console.log(expiresGet('mykey')); 
 

 
setTimeout(function() { 
 
    console.log(expiresGet('mykey')); 
 
}, 5000);