HTML5中的本地、WebSql、离线应用存储

1.   HTML5存储相关API

a)   Localstorage 本地存储

b)   Web Sql DataBase 本地数据库存储

c)   .manifest 离线应用存储

2.   HTML5 localStorage 本地存储：

a)   本地存储是一个window的属性：, 相当于一个大型的Cookie;

b)   window.localStorage :

c)   set方法：

i.      localStorage.t1 = “aaa”;

ii.      localStorage[t2] = “bbb”;

iii.      localStorage.setItem(“t3”, “ccc”);

d)   get方法：

i.      localStorage.t1;

ii.      localStorage[t1];

iii.      localStorage.getItem(“t1”);

e)   delete方法：

i.      localStorage.removeItem();

ii.      localStorage.clear(); // 清除所有；

f)   遍历方法：

i.      localStorage.length;

ii.      localStorage.key();

3.   HTML5 Web Sql Database 数据库：

a)   Web Sql 数据库API 实际上不是HTML5规范的组成部分；

b)   在HTML5之前就已经存在了，是单独的规范；

c)   它是将数据以数据库的形式存储在客户端，根据需求去读取；

d)   跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的；

e)   Web Sql 更方便于检索，允许sql语句查询；

f)   让浏览器实现小型数据库存储功能；

g)   这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；

4.   HTML5 Web DataBase 操作：

a)   openDatabase() :

i.      window.openDatabase(“数据库名”,”指定数据库版本1.0或2.0”,”数据库描述”,数据库大小，字节);

ii.      创建数据库对象，可以使用已有数据库，也可以创建新的数据库；

iii.      返回一个对象；

b)   transaction() :

i.      database.transaction(fn(obj));

ii.      用于触发操作；参数是一个匿名函数；

c)   executeSql() :

i.      tx.executeSql(sql语句,sql参数, 返回源,错误);

ii.      用于执行sql

5.   HTML5 本地离线应用存储：

a)   与HTML5 本地存储、本地数据库的关系；

6.   离线应用：

a)   Web2.0技术鼓励个人参与，每个人都是web内容的撰写者，如微博；

b)   Web应用能够提供离线的功能，让用户在没有网络的地方也能进行内容撰写，等到有网络的时候，再同步到web上；

c)   离线应用在首次加载的时候把所有资源下载下来，缓存到本地，离线应用与浏览器的缓存是不同的，我们可以指定缓存的内容，也可以指定那些东西是需要读取数据库的；

d)   HTML5对离线功能的支持，在第一次访问的时候会去访问服务器，并且下载一个存储清单，从清单中依次下载里面的内容，存储到指定位置，当我们清除浏览器缓存的时候，是不会清除到这些内容的，这些内容是指定存储的，浏览器二次访问的时候，就算是断网了还是可以去访问这些缓存到本地的内容的；用户在断网期间的操作，通过web sql存储下来，等联网的时候将本地的数据传上去；

7.   HTML5 实现离线应用  操作：

a)   配置服务器：

i.      让服务器支持.manifest类型文件；

ii.      AddType text/cache-manifest .manifest

b)   创建manifest文件： (存储清单)

i.      CACHE MANIFEST  // 声明文件头部

ii.      #This is a comment

iii.      CACHE  // 离线存储文件

iv.      NETWORK  // 需要网络调用的文件

v.      FALLBACK   // 资源失效或不可用时更新文件

c)  关联manifest文件到 html文档

8.   HTML5离线内容更新：

a)   自动更新：

b)   手动更新：

i.      检测window.applicationCache.status的值；如果是UPDATEREADY

ii.      使用 window.applicationCache.update更新缓存；