$23 离线应用与客户端存储

2017-06-04 本文已影响0人 xiaoguo16

开发离线Web应用的步骤：
1.检测设备是否可以上网；
2.能访问一定的资源；
3.有一块本地空间保存数据。

如何检测设备是否可以上网？
HTML5定义了navigator.onLine属性，值为true表示能上网，值为false表示设备离线。
HTML5还定义了两个事件，在window对象上触发：
online:网络从离线变为在线
offline:网络从在线变为离线

从缓存中访问离线资源
HTML5的应用缓存为appCache(application cache)，它是从浏览器缓存中分出来的一块缓存区。通过一个描述文件列出缓存清单：

CACHE MANIFEST
#Comment

file.js
file.css

这些清单中的文件会下载下来，在离线时使用。
该清单如何与页面连接？
在html标签中manifest属性中指定清单的路径
<html manifest="/offline.manifest">

在一块本地空间中保存数据。

Cookie是最初的数据存储方法，服务器端创建cookie，在HTTP请求头中将Set-Cookie作为响应的一部分。

Cookie绑定在特定的域名下，当创建了cookie后，返回响应时，cookie会保存在客户端中，为了保证cookie不会占用太多磁盘空间，还有更好的浏览器兼容性，cookie有以下限制：

每个域的cookie总数是有限的；
浏览器对于cookie的尺寸也有限制，不能过长。

名称：唯一确定cookie的名称。
值：储存在cookie中的字符串值。
域：cookie对于哪个域有效。
路径：对于指定域中的路径，才会发送cookie。
失效时间：cookie何时被删除。
安全标志：只有在SSL连接时才发送到服务器，即链接为https开头。

域、路径、失效时间、安全标志是服务器给浏览器的指示，以告知浏览器何时应该在请求中发送cookie。

JS中处理cookie的接口为document.cookie属性。

为了解决浏览器对某域名下的cookie数的限制，引入子cookie，使用cookie值存储多个名称值对儿。
name=name1=value1&name2=value2&name3=value3

尽可能在cookie中少存储信息，以避免影响性能。
由于cookie的性质和局限不能存储大量信息，因此出现了其他的方法。

Web Storage 的目的是客服cookie带来的一些限制，数据可以一直保存在客户端，无需发回服务器。
它的目标为：
提供在cookie之外保存会话数据的途径；
可以保存大量数据。
主要有两个windows对象：sessionStorage和globalStorage

跨会话持久化数据并遵循跨域安全策略。
有如下方法：

clear()：删除所有值
getItem(name):根据指定的名字name获取对应的值
key(index):获得index处的值的名字
removeItem(name):删除由name指定的名值对儿
setItem(name,value):为指定的name设置一个对应的值

在一个浏览器会话中存储数据，浏览器关闭后数据立即删除。

IndexedDB是在一种数据库，保存浏览器中的结构化数据，保存的形式为对象。