离线应用和客户端缓存

HTML5支持离线Web开发,离线Web应用指设备在没有网的情况仍然能运行的应用。本文简单总结了相关知识。

开发步骤:检测设备是否能上网--->访问一定的资源--->有一块本地空间保存数据。

离线测试:

if( navigator.onLine) {
    //正常工作
}else{
    //执行离线时的任务
}

online事件 offline 事件

应用缓存:

目的:确保离线时资源可用。
application cache 简称 appcache,是从浏览器的缓存中分出来的一块缓存区。
在这个缓存中保存数据,使用描述文件mamifest file,列出要下载和缓存的资源。

CACHE MANIFEST
#Comment

file.js
file.css

关联描述文件和页面


applicationCache对象:这个对象的status属性,表示应用缓存的状态。

0无缓存
1闲置
2检查中
3下载中
4更新完毕
5废弃

相关事件依次发生

checking/error/noupdate/downloading/progress/updateready/cached

update()事件:为检查更新触发以上事件
swapCache()事件:启动新应用缓存

数据存储:

目的:直接在客户端上存储用户信息,实现特定用户的信息储存在特定的机器上。

1.Cookie

HTTP Cookie:最初用于在客户端存储会话信息。
过程:
服务器:对任意的HTTP请求发送Set-Cookie HTTP头作为响应的一部分。包括会话信息。

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=vaule   //设置以name为名称,value为值的每一个cookie
other-header: other-head-value

浏览器:存储这样的会话信息,为每个请求加上Cookie HTTP头,将信息发送回服务器。

GET  /index.html  HTTP/1.1
Cookie: name=value   //添加了Cookie HTTP头
other-header: other-header-value

发送回服务器的额外信息可以用于唯一检验客户来自于发送的哪个请求。


1.1 限制
每个Cookie都是绑定在特定域名下,设置了一个cookie后,再给这个特定域名发送请求,请求都会包含这个cookie。
目的:确保储存在cookie中的信息,只能让批准的接受者访问,其他域不能访问。

1 每个域的cookie总数有限,超过数量限制继续创建cookie会导致前面设置的cookie丢失。
2 每个cookie的尺寸有限,大多数浏览器是4096B(加减1)的长度限制,最好限制在4095B以内。

1.2 Cookie的构成
名称: 每一个cookie对应的唯一名称,不区分大小
:储存在cookie中的字符串
:绑定了cookie的特定域
路径:特定域中向服务器发送cookie的路径
失效时间:何时停止向服务器发送这个cookie,默认会话结束的时候
安全标志:指定后,只有在使用SSL链接的时候才发送到服务器
注意:只有名值对会发送给服务器,其他参数都是服务器给浏览器的指示,告诉浏览器什么时候发送cookie。

1.3 JS中的Cookie
document.cookie:返回当前页面可用的所有cookie字符串
decodeURIComponent():解码
encodeURIComponent():编码
基本操作:读取、写入、删除

1.4 子Cookie

你可能感兴趣的:(离线应用和客户端缓存)