localStorage带有时间戳的内容可以自行删除

Question

我想在localStorage中有一个内容计时器。

例如，我有一个动态更新的DIV

<div id="news"><p>test</p></div>

并设法使用此代码将其作为html块添加到localStorage：

$(function() {
   localStorage["homeNews"] = JSON.stringify($("#news").html());
});
$(function() {
   if (localStorage["homeNews"] != null) {
       var contentsOfNews = JSON.parse(localStorage["homeNews"]);    
      $("#news").html(contentsOfNews);
 } 
});

我需要在localStorage [“homeNews”]中添加一个时间戳，并在5分钟后通过检查localStorage的当前时间和时间戳来删除它。

小提琴在这里：http://jsfiddle.net/Rn4NC/

Answer 1

LocalTtorage内容时间戳，TTL时间可以自行删除

  

JSFiddle：http://jsfiddle.net/Rn4NC/3/

目标是提供一个易于使用的接口，以根据程序员提供的时间提取不太旧的数据。这是简单的界面：

使用TTL

的DB示例

HTML

<div id="news"><p>test</p></div>

的JavaScript

$(function() {
    // Set Value with TTL of 5 Seconds using Milliseconds.
    db.set( "homeNews", $("#news").html(), 5000 );
});

$(function() {
    // Get Value
    var contentsOfNews = db.get("homeNews");

    // Show Value
    $("#news").html(contentsOfNews);
});

这是示例用例，接下来是具有TTL支持的接口定义：

使用TTL接口定义的本地存储。

以下是db用法的接口逻辑，用于上面的示例。查看JSFiddle示例以了解完整用法。

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