Javascript学习笔记19 离线应用和客户端存储

离线检测

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.youkuaiyun.com/zjw_python/article/details/79217644
https://blog.youkuaiyun.com/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。