Question

我刚刚了解了localStorage并编写了一个脚本来缓存来自本地存储中的ajax请求的数据。

我们可以在localStorage中设置数据的时间戳，以便在2小时后删除它并发送新的ajax请求以获取数据吗？这样，如果数据被更新，用户就可以访问新数据。

这是我当前代码中的一个小提琴，用于在本地存储中缓存数据。

以下是代码：

if ( localStorage && localStorage.getItem('aGithub') ) {
  console.log('if statement using local storage');
  console.log (JSON.parse( localStorage.getItem('aGithub') ));
}
else {
  console.log('else statment using ajax');
  $.ajax({
    url : 'https://api.github.com/users/paulirish', //just a test because Paul Irisih is awesome!
    dataType : 'json',
    success : function (data) {
        if ( localStorage ) {
            localStorage.setItem( 'aGithub', JSON.stringify(data) );    
        }
        console.log(data);
    }
  });
}

Answer 1

这是一个很好的资源，讨论本地存储，包括如何使数据到期。

http://24ways.org/2010/html5-local-storage/

Answer 2

在localstorage中存储一个定义上次访问时间的条目，然后在每次访问时将其与当前时间进行比较。如果n时间已过，请获取新数据。

http://jsfiddle.net/Q77RL/2/

var myGithub = {
    lifespan: 1*10*1000, //10 seconds, change this to 1 hour
    def: $.Deferred(function(def){
        if (localStorage && localStorage.getItem('myGithub')) {
            def.resolve(JSON.parse(localStorage.getItem('myGithub')))
        }
        else {
            def.resolve({});
        }
    }).promise(),
    fetchData: function(){
        console.log(parseInt(localStorage.getItem('myGithubTS'), 10),parseInt($.now(), 10),this.lifespan);
        if (localStorage && (!localStorage.getItem('myGithub') || !localStorage.getItem('myGithubTS') || parseInt($.now(), 10) - parseInt(localStorage.getItem('myGithubTS'), 10) > this.lifespan)) {
            this.def = $.ajax({
                url: 'https://api.github.com/users/paulirish', //just a test because Paul Irisih is awesome!
                dataType: 'json',
                success: function (data) {
                    if (localStorage) {
                        localStorage.setItem('myGithub', JSON.stringify(data));
                    }
                    console.log(data);
                }
            }).then(function(){
                return JSON.parse(localStorage.getItem('myGithub'));
            });
            localStorage.setItem('myGithubTS', $.now());
        }
        return this.def;
    }
};

var counter = 0;
var interval = setInterval(function(){
    myGithub.fetchData().done(function(data){
        console.log(data);
    });
    if (counter == 40) {
        clearInterval(interval);
    }
    counter++;
},1000)

上面的代码每10秒才会打到一次api。更改lifespan属性以更改持续时间的长度。要获取新数据，只需使用

即可

myGithub.fetchData().done(function(data){
    console.log(data);
});

您可以根据需要多次使用它，并且每10秒只能点击一次api。

1小时后删除localStorage并重新获取数据

2 个答案: