离线检测
HTML5的navigator.onLine
属性可以检测设备的网络状态,值为true
表示能上网,为false
表示离线
if (navigator.onLine){
//正常工作
} else {
//离线任务
}
除此之外HTML5还定义了两个事件online
和offline
,当网络从离线变为在线或从在线变为离线时分别触发这两个事件
window.addEventListener("online",function(){
alert("Online");
},false);
window.addEventListener("offline",function(){
alert("Offline");
},false);
应用缓存
HTML5的应用缓存(appcache),是专门为开发离线web应用而设计的。要想在缓存中保存数据,需要使用一个描述文件(manifest file),列出要下载和缓存的资源。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存,等价于CACHE
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
file.js
file.css
NETWORK
*
FALLBACK
info.html
并将描述文件和页面关联起来,描述文件的后缀名一般为appcache
<html manifest="/offline.appcache">...</html>
Javascript的applicationCache对象的status
属性可以检测当前应用缓存的状态
- 0:无缓存
- 1:闲置,即缓存未更新
- 2:正在下载描述文件并检查更新
- 3:正在下载描述文件中指定的资源
- 4:更新完成
- 5:无法访问应用缓存
事件
- error:发生错误时触发
- progress:文件下载过程中不断触发
- updateready:页面新的应用缓存下载完毕,可以通过swapCache()使用
- cached:应用缓存完整可用
方法
- update():检查描述文件是否更新,若更新,则下载新的资源
- swapCache():当触发了updateready事件时,说明新版本的应用缓存已可用,调用该方法启用新缓存
Cookie
HTTP Cookie, 最初用于在客户端存储会话消息,其介绍和相应的HTTP头部字段见如下两篇博客介绍
https://blog.csdn.net/zjw_python/article/details/79217644
https://blog.csdn.net/zjw_python/article/details/79310100
Cookie由以下几部分构成
- 名称:不区分大小写
- 值:必须被URL编码
- 域:表示cookie对哪个域是有效的
- 路径:对于指定域中的那个路径,才对服务器发送Cookie
- 失效时间:表示cookie何时应该被删除,GMT格式日期(Wdy,DD-MM-YYYY HH:MM:SS GMT)
- 安全标识:指定后,cookie只有在使用SSL连接的时候才会发送到服务器
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires = Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
other-header:value
路径,域,失效时间,安全标志等都是服务器发给浏览器的指示,这些参数不会被发送到服务器,只有名称-值对才会被发送。Cookie的数目和尺寸不同的浏览器有限制,不要创建超过浏览器限制数目和尺寸的cookie,否则可能会被废弃
Javascript处理cookie
页面的cookie信息都以字符串的形式存储在document.cookie
属性中,可以使用javascript进行处理
name1=value1;name2=value2;name3=value3
所有名称和值都是经过URL编码的,必须使用decodeURIComponent()
来解码
当设置cookie值时,可以为document.cookie
设置一个新的cookie字符串,其会被解释并添加到现有的cookie集合中,而不会覆盖原有的cookie,除非cookie名称已存在,使用的格式与Set-Cookie
头中一致,在设置值时,建议先使用encodeURIComponent()
进行URL编码
name=value;expires=time;path=domain_path;secure
没有删除已有cookie的直接方法,需要使用相同的路径、域、安全选项再次设置cookie,并将失效时间设置为过去的时间
子cookie用于绕开单域名下cookie数目的限制,可使用查询字符串的形式存储在单个cookie值中,比如
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5
Web Storage
Web Storage提供一种在cookie之外的存储会话数据的途径,并提供了大量存储空间。
Storage类型
该类型提供以下方法,可以直接调用,也可通过Storage对象间接调用
- getItem(name):根据指定的名字name获取对应的值
- key(index):获得index位置处的值的名字
- removeItem(name):删除由name指定的名值对儿
- setItem(name,value):为指定的name设置一个对应的值
Storage类型还具有length
属性用于判断值对的数目。Storage类型只能存储字符串,非字符串数据在存储前会被转换为字符串
sessionStorage对象
用于存储特定于某个会话的数据,数据只保持到浏览器关闭。sessionStorage对象是Storage的一个实例,可以使用Storage类型的方法或直接设置属性来存储数据。sessionStorage对象中的数据只能被最初给对象存储数据的页面访问到,对于多页面有限制。
sessionStorage.setItem("name","zjw");
sessionStorage.book = "javascript";
var name = sessionStorage.getItem("name");
sessionStorage.removeItem("book");
localStorage对象
localStorage是Storage的实例,可以像使用sessionStorage一样来使用它。要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),且使用同一种协议,在同一个端口上。
localStorage.setItem("name","zjw");
localStorage.book = "javascript";
var name = localStorage.getItem("name");
localStorage.removeItem("book");
storage事件
对Storage对象进行任何修改(保存、删除数据),都会在文档中触发storage事件,这个事件的event
对象具有以下属
性:
- domain:发生变化时的存储空间域名
- key:设置或删除的键名
- newValue:如果是设置值,则是新值,若为删除值,该值为null
- oldValue:键被更改之前的值
浏览器对于每个来源(协议、域和端口)的存储数据有限制,sessionStorage和localStorage一般都是2.5MB。