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

1.  HTML5存储相关API

a)  Localstorage本地存储

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

c)  .manifest 离线应用存储

2.  HTML5localStorage 本地存储：

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 SqlDatabase 数据库：

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

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

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

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

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

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

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

4.  HTML5 WebDataBase 操作：

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.     CACHEMANIFEST  // 声明文件头部

      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更新缓存；