chap16本地存储与离线应用.ppt

第16章本地存储与离线应用;主要内容;1、概述;1、概述--WebStorage;1、概述——HTML4的本地数据存储方式;Cookie（小饼干）;Cookie工作原理;Session工作原理;主要用途;Cookie缺陷;WebStorage;WebStorage;浏览器的支持;检查浏览器是否支持WebStorage-请打开ex3_1.html;Storage接口;localStorage和sessionStorage操作;也可以通过localStorage.键名和localStorage[键名]的形式访问localstorage数据。

例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据：

localStorage.setItem(key,value);

localStorage.key=value;

localStorage[key]=value;

注：保存时，不允许重复保存相同的键名，保存后可以修改键值，但不允许修改键名;getItem获取value

用途：获取指定key本地存储的值

用法：.getItem(key)

代码如下:

varvalue=sessionStorage.getItem(key);

varsite=localStorage.getItem(site);

;也可以通过localStorage.键名和localStorage[键名]的形式访问localstorage数据。

例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：

varvalue=localStorage.getItem(key);

varvalue=localStorage.key;

varvalue=localStorage[key];

;20;removeItem删除指定key

用途：删除指定key本地存储的值

用法：.removeItem(key)

代码示例：

sessionStorage.removeItem(key);

localStorage.removeItem(site);

;clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

代码示例：

sessionStorage.clear();

localStorage.clear();

;23;2、简单Web留言本;示例：;3、作为简易数据库使用;示例：客户信息管理网页;28;小结：为什么比cookie好;这并不意味着WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。所以仅仅作为本地存储解决方案WebStorage是优于cookie的。

;2.5storage事件;2.5storage事件;33;二、本地数据库;1、SQLite数据库;2、SQLite数据库的使用;实际访问数据库的时候，还需要调用transaction方法，用来执行事务处理

transaction可以防止在对数据库进行访问及执行有关操作的时候受到外界打扰

transaction对象的executeSql方法：

transaction.executeSql(sqlquery,[],dataHandler,errorHandle);

??executeSql方法中，将SQL语句中所要用到的参数先用“？”代替，然后将这些参数组成数组放在第二个参数中

(“updatestusetage=?wherename=？;”,[age,name]);;二、离线存储;应用程序缓存为应用带来三个优势：

离线浏览–用户可在应用离线时使用它们

速度–已缓存资源加载得更快

减少服务器负载–浏览器将只从服务器下载更新过或更改过的资源。;第一步、添加HTML5doctype;第二步：配置mime类型;第三步：创建manifest文件;CACHEMANIFEST

#Thisisacomment

CACHE：

index.html

style.css

NETWORK:

search.php

login.php

FALLBACK:

/apioffline.html;第四步：关联manifest文件到html文档;如果Web应用程序仅仅是一些静态页面的组合，那么通过cachemanifest缓存资源文件以后，就可以支持离线访问了

那么在开发支持离线的Web应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以