javascript - 带有时间戳的 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

LocalStorage Content Timestamp with TTL Time To Live to remove its own

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