app 缓存html页面,HTML5本地存储VS App缓存离线网站浏览

ylerjen..

17

AppCache使用清单文件来定义应用程序应该存储哪些文件(您可以缓存文件和资源,如HTML页面,JS脚本,CSS样式,图像......)

LocalStorage将存储数据,但不存储页面.因此,您可以将stringify的每个javascript对象都存储在localStorage中.

所以AppCache和localStorage不一样,但它们是互补的.

例

想象一下你想要离线使用的网络日历(注意:对于这个例子,我们在这里使用静态页面,数据用javascript加载.同样可以从动态页面制作,但这个例子使用静态).

appcache将存储html页面及其使用的资源(javascripts,css,images)来呈现页面.当您在清单文件中放入要为下次离线访问进行缓存的所有内容时,页面将被存储,您将能够在下次访问时离线显示您的页面.

但问题是,您的日历显示但是为空.本月的所有会议和活动都不存在.这是因为您的页面已存储,但您仍需要网络来加载日历中的会议.当你离线时,你没有网络......

如果您希望所有会议也可以脱机使用,则必须将它们存储在本地存储中(不在appCache中,因为它不是页面,而是由JavaScript访问的数据.)因此您需要更改Javascript函数由此 :

function initApp() {

var data = loadDataWithAjax();

renderPlanning(data);

}

对此

function initApp () {

var data;

if(offline) {

data = loadFromLocalStorage();

} else {

data = loadDataWithAjax();

storeDataInLocalStorage(data);

}

renderPlanning(data);

}