分享会 - 缓存
“空间换时间”，牺牲一部分空间代价，来换取整体效率的提升
0 离线应用的preconditions a是否能上网 b应用必须能访问一定的资源 c必须有一块本地空间用于保存数据
1 表示是否在线 navigator.onLine
2 firefox opera 必须文件->Web开发人员->脱机工作，才能让浏览器正常工作
3 两个事件 online offline
EventUtil.addHandler( window, "online", function(){});
EventUtil.addHandler( window, "offline", function(){});
4 application cache 或者称为appcache, 要想在这个缓存中保存数据，要用一个描述性文件
manifest file
file.js
file.css
<html manifest="/offline.manifest"> 这个文件的mine类型必须为
text / cache-manifest
扩展名推荐用appcache，
5 applictionCache对象。属性: status 属性，值是常量
0 无缓存
1 闲置,应用缓存未得到更新
2 检查中,即正在下载描述文件并检查更新
3 下载中,即应用缓存正在下载描述文件中指定的资源
4 更新完成, 即应用缓存已经更新了资源，而且所有资源已下载完毕，可以通过swapCache()来使用了
5 废弃：应用缓存的描述文件已经不存在，即无法再访问缓存
6 表示应用缓存状态改变的事件
checking：在浏览顺为应用缓存查找更新时触发
error：在检查更新或下载资源期间发生错误时触发
noupdate：在检查描述文件发现文件无变化时触发
downloading： 在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中持续不断地触发
updateready：在页面新的应用缓存下载完毕且可以通过 swapCache（）使用时触发
cached：在应用缓存完整可用时触发
7 applicationCache.update() 一经调用，应用缓存就会去检查描述文件是否更新(触发checking事件)
应用缓存已经准备就绪，触发cached事件
新版本的应用缓存已经可用，触发updateready事件，此时你需要启用swapCache()来启用新应用缓存 比如:
EventUtil.addHandler( applicationCache, "updateready", function(){
applicationCache.swapCache();
} ) ;
8 Persistent Client State: Http Cookies
https://curl.haxx.se/rfc/cookie_spec.html
cookie 好像是客户端在发给服务端消息时要附带的数据
9 Set-Cookie Http Response Header 语法
NAME=value 这是唯一必须的
expireds=DATE 格式: Wdy, DD-Mon-YYYY HH:MM:SS GMT
domain=Domain_Name
path=PATH
secure, 只能用https
name和value都必须是url编码
10 Cookie Https Request Header的语法
he browser will match the URL against all cookies and if any of them match, a line containing the name/value pairs of all matching cookies will be included in the HTTP request. Here is the format of that line:
Cookie: NAME1=OPAQUE_STRING1; NAME2=OPAQUE_STRING2 ...
11 cookie只是在客户端存储数据的其中一个选项
12 cookie最初是在客户端用于存储会话信息的，该标准要求服务器对任意Http请求发送Set-Cookie Http头作为响应的一部分，其中包含会话信息。 例如：
http/1.1 200 ok
Content-type: text/html
SetCookie: name=value
Other-header: other-header-value
13 浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie Http头将信息发送回服务器，如下所示:
Get /index.html Http/1.1
Cookie: name=value
Other-header: other-header-value
发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求.
14 限制
cookie在性质上是绑定在特定的域名下的，当设定了一个Cookie后，再给创建它的域名发送请求时，都会包含这个cookie。 这个限制确保了储存在Cookie中的信息只能让批准的接受访问，而无法被其他域访问。
15 cookie 是存在客户端pc上，每个域的cookie总数是有限的，
ie firefox 是50个
opera 是30个
safari 和 chrome 没有硬性规定
超限会清掉以前的
16 浏览器对cookie的尺寸也有限制，每个域下的所有cookie要在4095B以下。 就是4kB
如果你创建得过大，会被自动清掉.
17 1字节等于8比特，1byte=8bit
1kb==1024字节
B就是字节 b是比特
一个英文占一个字节
一个汉字占两个字节
一m带宽的意思，一兆比特每秒，而不是一兆字节每秒
18 cookie的构成
名称: 不区分大小写，名称必须通过URL编码
值: 必须被URL编码
域: cookie对于哪个域是有效的。所有向该域发送的请求都会包含这个cookie信息. 这个值可以包含子域，如www.vox.com; 也可以不包含它( 如果vox.com, 则对于它所有的子域都有效)，如果没有明确设定，那么这个域会被认作来自设置cookie的那个域.
路径: 对于指定域的那个路径，应该向服务器发送cookie，例如，你可以指定cookie只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送cookie信息，即使请求都是来自同一个域的.
失效时间: 表示cookie被删除的时间戳，默认情况下，浏览器会话结束即将所有cookie删除。cookie可以浏览器器关闭后依然保存在用户的机器上
安全标志: 指定后，cookie只有在使用ssl连接的时候才会发送到服务器，例如cookie信息只能发送给https://www.vox.com. 而http://www.vox.com 的请求则不能发送cookie
19 每一段信息都作为Set-Cookie头的一部分，使用分号加空格分隔每一段，如下例所示：
http/1.1 200 ok
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-01 01:0:20 GMT; domain:.wrox.com;secure; path=/
20 域，路径，失效时间，和 secure 标志，都是服务器给浏览器的指示，以指定何时应该发送cookie. 这些参数并不会作为发送到服务器的cookie信息的一部分，只有名值对儿才会被发送
21 javascript中的cookie
BOM的document.cookie很蹩脚的，不是很直观. 它会因为使用方式的不同表现出不同的行为，当用来获取属性值时，document.cookie返回当前页面可用的所有cookie的字符串，用分号隔开的名值对儿，如下例所示.
name1=value1;name2=value2;name3=value3
所有名字和值都是经过url编码的，所以必须使用decodeURIComponent（）来解码.
22 当用于设置值时，document.cookie属性可以设置为一个新的cookie字符串，这个cookie字符串会被解释并添加到现有的cookie集合中，设置document.cookie并不会覆盖cookie, 除非设置的cookie名称已存在，
格式： name=value;expire=expiration_time;path=domain_path;domain=domain_name:secure 这些参数中，只有cookie的名字和值是必需的，
要这样写： document.cookie = encodeURIComponent("name") + "=" +
encodeURIComponent("Nicol") ;
23 子cookie
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5
24 还有一类cookie被称为http专有Cookie, 它可以从浏览器或服务器设置，但只能从服务器端读取，因为javascript无法获取http专有cookie的值
35 cookie数据太多会影响请求性能，建议只存少量数据，并且敏感数据不要存在里面
36 持久化用户数据
1 允许每个文档最多128KB，每个域名最多1MB数据.
首先要使用css在某个元素上指定userData行为
<div style="behavior:url(#default#userData)" id="dataStore"></div>
2 设置
var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name","Jason");
dataStore.save("BookInfo")
3 获取
dataStore.load("BookInfo");
dataStore.getAttribute("name");
4 删除
dataStore.removeAttribute("name");
dataStore.save("BookInfo");
5 与cookie的区别
5.1 无法将用户数据访问限制扩展到更多的客户,
5.2 可跨会话持久存在，也不会过期.
5.3 删除数据只能用removeAttribute()
6 和cookie的相同点
6.1 要访问某个数据空间，脚本运行的页面必须来自同一个域名，在同一个路径下，并使用与进行存储的脚本同样的协议.
37 Web Storage 机制
37.1 目的
37.1.1 提供一种在cookie之外存储会话数据的途径.
37.1.2 提供一种存储大量可以跨会话存在的数据的机制
实现Storage类型，有两个对象的定义：sessionStorage 和 globalStorage 这两个都是以windows对象属性的形式存在的
37.2 方法
clear()
getItem( name ). 根据指定的名字获取对应的值
key(index). 获得index位置处的值的名字
removeItem(name), 删除由name指定的名值对儿
setItem(name,value)，为指定的name设置一个对应的值
length 判断有多少名值对儿存放在Storage对象中
remainingSpace() 用于获取还可以使用的存储空间的字节数
38 sessionStorage对象
可存储特定于某个会话的数据，只保持到浏览器关闭
可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启后依然可以用（这一点IE不支持）
它是Storage的一个实例，可以用Storage类的方法
firefox WebKit是同步写入，而ie是异步写入（那ie可更快地恢复执行，它会跳过实际的磁盘写入过程）
ie8中可以强制把数据写入磁盘：
sessionStorage.begin() 这行的目的是确保在这段代码执行的时候不会发生其它磁盘写入操作
sessionStorage.name = ""
sessionStorage.commit();这段代码确保了立即被写入磁盘,
39 可用length和key迭代出sessionStorage中的值
for( var i=0, len=sessionStorage.length ; i < len ; i ++ ){
var key = sessionStorage.key( i ) ;
var value = sessionStorage.getItem( key ) ;
alert( value ) ;
}
40 也可用for in来迭代出sessionStorage中的值
for( var key in sesssionStorage ){
var value = sessionStorage.getItem( key ) ;
}
globalStorage对象