HTML5一步一步走——独立数据存储

HTML离线存储的两种方式
Web 存储:适用于具有 key/value对的基本本地存储
离线存储:利用一个 manifest文件来高速缓存所有文件以便离线使用
数据库存储

在使用web存储API之前需要做的第一件事情是核查用户的浏览器是否支持这一API:
function checkLocalStorageSupport() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}


sessionStorage还是localStorage存储结构本质上仍然是个哈希表。
它们的一些属性方法有:
属性/方法		返回值		描述
length			integer		包含对象数目,此属性只读
key(n)			domstring	数组对象返回值
getItem(key)		data		获得某对象值
setItem(key,data)	void		设置某对象
removeItem(key)		void		移除某对象
clear()			void		清空


遍历所在存储变量
遍历数组的方法,和平时的遍历数组一个样:
for(var i=0;i<localStorage.length;i++){
var item = localStorage.getItem(localStorage.key(i));
alert("Found item"+item);
}

localStorage不同于SessionStorage,localstorage是针对协议,域名,端口,类似于全局应用。

离线存储:
高速缓存的Manifest文件
Manifest文件具有一个基本架构。 每个manifest 文件以 CACHE MANIFEST 开头,并且从这里开始,列出所有浏览器需要高速缓存的、用于离线访问的文件。
CACHE MANIFEST
style.css
offlinescript.js
images/dreamweaver_logo.png
images/edge_logo.png

上述的缓存文件相应的路径均与用户正在访问的HTML页面相关。

离线状态:
window.applicationCache
取值名称含义
0 UNCACHED页面完全没有被缓存,可能是没被设
1 IDLE已经被下载并可访问
2 CHECKING正在检查缓存是否需要更新
3 DOWNLOADING发现新版本正在更新
4 UPDATEREADY已经下载完成,下次离线访问就可用
5 OBSOLETE缓存清单文件访问失败,此页面会被从缓存中清除

window.applicationCache.status

离线事件:
window.applicationCache.addEventListener("progress",function(e){
alert("New file downloaded");
},false)//告知用户页面下载下载中


名称 						描述 
checking 					检查在manifest里面的文件是否有更新
noupdate					没有找到新文件
downloading 					下载中
progress 					任何文件被下载这一事件都会被唤起
cached 						所有缓存都被下载完
updateready 					由于manifest,所有文件被从新下载完毕。
obsolete 					由于manifest清空,文件找不到
error 						各种错误,女如manifest格式错。


更新缓存方法:
js中有update()和swapCache()方法直接更新缓存
例如Cache.swapCache();window.application.addEventLister("updateready",functione{window.application});

可以使用setIntegerval()定期唤醒更新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值