js023-离线应用与客户端存储

js023-离线应用与客户端存储

本章内容：

进行离线检测

使用离线缓存

在浏览器中保存数据

23.1 离线检测

第一步：知道设备是在线还是离线：navigator.Online属性。该值为true表示可以上网，false表示不能上网。

除了navigator.Online属性之外，为了更好的确定网络是否可用，HTML定义了两个事件：online和offline事件

23.2 应用缓存

应用缓存（application cache）简称appcache。想在缓存中保存文件需要使用描述文件，列出要下载和缓存的资源。

如下是简单的描述文件示例：

CACHE MANITEST

#Comment

file.js

file.css

applicationCache对象的一个status属性，该属性是常量值，表示应用缓存的状态：

状态	说明
0	无缓存，没有雨页面相关的应用缓存
1	闲置，应用缓存没有得到更新
2	检查中，正在下载秒速文件并检查更新
3	下载中，应用缓存正在下载描述文件中指定的资源
4	更新完成
5	废弃

应用缓存有许多相关事件，如下：

事件	触发场景
checking	在浏览器为应用缓存查找更新时触发
error	在检查更新或下载资源期间发生错误时触发
noupdate	在描述文件发现文件无变化时触发
downloading	在开始下载应用缓存资源时触发
progress	在文件下载应用缓存的过程中持续不断的触发
updateready	在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发
cached	在应用缓存完整可用时触发

23.3 数据存储

23.3.1、Cookie

cookie，用于客户端存储会话信息。

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

cookie由浏览器保存的一下几块信息构成：

名称	一个唯一确定的cookie的名称，值必须被URL编码
值	存储在cookie中的字符串值，值必须被URL编码
域	cookie对于哪个域是有效的
路径	对于指定域中的那个路径，应该向服务器发送cookie
失效时间	表示cookie何时应该被删除的事件戳
安全标志	指定后，cookie只有在SSL连接时才会发送到服务器。

所有的名字和值都是经过URL编码的，所以必须使用decodeURIComponent()来解码。

基本的cookie操作有三种：读取，写入和删除。如下代码所示：

P631  练习中的代码如下所示，看懂这段代码的各种细节。

(URI:uniform resource identify;   URI:uniform resource link)

获取子cookie的方法：

get()	获取单个子cookie的值，接收两个参数：cookie的名字和子cookie的名字
getAll()	获取所有子cookie并将它们放入一个对象中返回（如果cookie不存在则返回null）

设置子cookie有两种方法:

set()	该方法接收7个参数：cookie名称、子cookie名称、子cookie值、可选的cookie失效日期或时间的Date对象、可选的cookie路径、可选的cookie域、可选的cookie布尔secure标志（所有可选标志都是适用于cookie本身而不是子cookie）
setAll()	该方法接收7个参数：cookie名称、包含所有子cookie的对象、可选的cookie失效日期或时间的Date对象、可选的cookie路径、可选的cookie域、可选的cookie布尔secure标志

 

23.3.2、IE用户数据

23.3.3、Web存储机制

Web storage:

目的：客服有cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发挥服务器。两个主要目标是：

提供一种在cookie之外存储会话数据的途径

提供一种存储大量可以跨会话存在的数据的机制

1 Storage 类型

Storage 对象有方法如下：

方法	说明
clear()	删除所有值，firefox中没有实现
getItem(name)	根据指定的名字name获取对应的值
key(index)	获得index位置处的值的名字
removeItem(name)	删除由name指定的名值对
setItem(name, value)	为指定的name设置一个对应的值

2 sessionStorage 对象

在IE8中可以强制把数据写入磁盘。如下:

sessionStorage.begin();    (在设置新数据之前使用该方法)

sessionStorage.name = “meimei”;

sessionStorage.book = “professional JavaScript”;

sessionStorage..commit();     (在设置新数据完成后使用该方法)

3 globalStorage 对象

当使用这个对象的时候一定要指定一个域名。如果事先不能确定域名，使用location.host作为属性名比较安全如：

globasStorage[location.host].name = "meimei";

var book = globasStorage[location.host].getItem;

4 localStorage 对象

不能给localStorage指定任何访问规则，规则事先就是订好的。要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效）使用同一种协议，在同一个端口上。相当于globasStorage[location.host]。

//使用方法存储数据

localStorage.setItem("name", "meimei");

//使用属性存储数据

localStorage.book = "professional JavaScript";

//使用属性存储数据

var book = localStorage.book;

5 Storage 事件

对Storage对象进行任何修改都会在文档上触发Storage事件。该对象的event对象有以下属性。

属性	说明
domain	发生变化的存储空间的域名
key	设置或者删除的键名
newValue	如果是设置值，则是新值；如果是删除键，则是null
oldValue	键被更改之前的值

6限制

同客户端存储方案类似，web storage也有限制。

23.3.4 IndexedDB

是浏览器中保存结构化数据的一种数据库。

思想：创建一套API，方便保存和读取JavaScript对象，同时还支持查询及搜索。

异步进行的操作。

1、数据库

特色：使用对象保存数据，而不是用表来保存数据

2、对象存储空间

建立数据的连接后，下一步就是使用对象存储空间。

添加数据：

add()	接收一个参数：要保存的对象。在空间中已经包含键值相同的对象时，add()会返回错误。
put()	接收一个参数：要保存的对象。在空间中已经包含键值相同的对象时，put()会重写原有对象。

每次调用add()或put()都会创建一个新的针对这个对象存储空间的更新请求。如果想验证请求是否成功完成，可以吧返回的请求对象保存在一个变量中，然后在指定onerror或onsuccess事件处理程序。

创建了对象存储空间后并向其中添加了数据之后，就该查询数据了。

3、事务

在数据库上调用transaction()方法可以创建事务，在任何时候，只要想读取或修改数据，都要通过事务来组织所有操作。可以如下创建事务：

var transaction = db.transaction();	没有参数，只能通过事务来读取数据库红个保存的对象
var transaction = db.transaction("users"); 或： var transaction = db.transaction("users", "anotherStorage");	传入要访问的一个或多个对象存储空间

4、使用游标查询

游标，一个指向结果集的指针，在需要检索多个对象的情况下，需要再事务内部创建游标。

IDBCursor的实例有一下几个属性：

属性	说明
direction	数值，表示游标移动的方向
key	对象的键
value	实际的对象
primaryKey	游标使用的键，可能是对象键，也可能是索引键

5、 键范围

四中定义键范围的方式：

only()	传入你想获得的对象的键
lowerRange()	指定结果集的下界，下界表示游标的开始
uperRange()	指定结果集的上界，上界表示游标的终止
bound()	指定结果集的上下界

6、设定哟表方向

7、索引

在任何时候，通过IDBIndex对象的下列属性都可以去的有关索引的相关信息

对象	说明
name	索引的名字
keyPath	传入createIndex()中的属性路径
objectStore	索引的对象存储空间
unique	表示索引键是否唯一布尔值。

8、并发问题

9、限制

声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！