html5学习笔记之七（独立数据存储）

看视频，学笔记：

cookie不支持加密，易造成信息泄露，且存储空间只有8k。

flash应用有lso存储，默认存储为100k，最大为10MB。

silverlight3开始，提供存储功能，默认为1MB。

1.storage接口

storage是一个哈希表，提供两种存储方式，有sessionstorage和localstorage，都有以下的属性：

length：包含对象数目，为只读属性，返回值为integer类型

key(n)：为数字对象返回值

getItem(key)：获得某个对象值

setItem(key.data)：设置某对象，默认是在后面添加

removeItem(key)：移除某对象

clear：清空

注意：变量支持UTF-16，即使空字符也可以当变量名

访问变量的方式有三种：setItem()、getItem()、localStorage.currentTemp = 18

2.遍历所有存储变量

for(var i = 0; i < localStorage.length; i++){

var item = getItem(localStorage.key(i));

alert("Found item " + item);

}

目前只支持字符类型，要使用其他字符的话，要使用JSON.stringify(itemsObject)来转换

因为目前还没有统一的标准，故建议空间为5MB

3.sessionStorage和localStorage

针对cookie的不足实现的，因为cookies对站点绑定，多个浏览器实例共享一个，所以安全性不是很好，而sessionStorage对浏览器绑定（无论是新窗口或新tab）

localStorage使用方法差不多，但它针对于协议、域名、端口的使用，类似于全局应用

4.离线应用

使用.appcache存储web应用的副本，使用标签进行标记哪些要联网使用，哪些不用联网使用。缓存文件使用UTF-8编码，以CACHE MANIFEST开头，有三个基本部分：

例子：

CACHE MANIFEST

menu.html

menu.js

cnnection

NETWORK:  //此文件必须要从网络访问

login.php

FALLBACK:  //缓存找不到时要跳转的地方

//ment.html

CACHE:  //真正需要缓存的内容

style/innbar.css

5.如何判断状态是否离线：

window.applicationCache的全局变量会有标记，window.applicationCache.status的取值可以查看：

取值为0，UNCACHED，表示页面完全没有缓存，可能是未被设定或尚未被下载

取值为1，IDLE，表示已经被下载并可访问

取值为2，CHECKING，表示正在检查缓存是否需要更新

取值为3，DOWNLOADING，发现新版本正在更新

取值为4，UPDATEREADY，已经下载完成，下次离线访问就可用

取值为5，OBSOLETE，缓存清单文件访问失败，此页面会被从缓存中清除

6.离线事件

window.applicationCache.addEventListener("progress", function(e){

alert("New file downloaded");

}, false);

有以下事件：

checking：检查在manifest里面的文件是否有更新

noupdate：没有找到新文件

downloading：下载中

progress：任何文件被下载这一事件都会被唤醒

cached：所有缓存都被下载完

updateready：由于manifest，所有文件都被重新下载完毕

obsolete：由于manifest清空，文件找不到

error：各种错误，比如manifest文件格式错误

7.更新缓存方法

提供update()和swapCache()直接更新缓存，例如：

window.applicationCache.addEventListener("updateready", function(e) {window.applicationCache.swapCache();}, false);

也可以使用SetInterval()定期唤醒更新，但因为会耗费大量时间，故应慎重使用.

8.检测是否在线

使用window.navigator.onLine：

window.addEventListener("online", function() { alert(" Your are now online"); }, false);

window.addEventListener("offline", function(){alert("Your are now OFFLINE");},false);

因为不测路由，只测连接，所以不一定能连上网，服务器正常，只能证明有网络。

9.调试工具

对IE而言，按F12可以调出调试工具，工作方式默认为在线工作方式。