缓存Webapp界面并使用html5 localstorage恢复它

时间:2013-09-25 09:54:28

标签: javascript jquery html5 local-storage

好。所以我听说过很多关于使用phonegap和html5构建应用程序的方法。该应用程序工作正常,但它访问一个Web服务来填充div进行显示。该服务运行良好我想要实现的是一种缓存机制,用于在后台进行新的请求时使用本地存储从服务存储最后一个接口。

这是我的javascript代码。请问我做错了什么。

P.S是一个html5 / js中间用户。但是,我用户php非常好。

function loadHome()
{

$("#post_display").html(waitText); 
$.get(api_url',{ app_key: my_app_key } ,
function(data){
    if(('localStorage' in window) && window['localStorage'] !== null)
    {
        localStorage.setItem('data_home',data); alert(localStorage.getItem(data_home));
    }
    $("#post_display").html(data) }
    );

}

到目前为止,警报仍然有效并向我显示存储的数据。现在,当用户返回页面时,如何显示数据。我使用什么条件逻辑? 样品

if(localstorage.data_home){ //display store data here } 
else{//run the ajax call to the api service}

我不知道怎么回事。帮助

1 个答案:

答案 0 :(得分:0)

在你打电话给ajax之前检查一下。这只是一个示例,您需要重构源代码。

function loadHome()
{

$("#post_display").html(waitText); 
if(('localStorage' in window) && window['localStorage'] !== null && localStorage.getItem('data_home')){
    $("#post_display").html(localStorage.getItem('data_home'));
    return;
}
$.get(api_url',{ app_key: my_app_key } ,
function(data){
    if(('localStorage' in window) && window['localStorage'] !== null)
    {
        localStorage.setItem('data_home',data); alert(localStorage.getItem(data_home));
    }
    $("#post_display").html(data) }
    );

}