web 离线存储

        应用缓存

              在移动设备没有网络的情况下不出现404并且可以进行简单的使用

        1.需要有一个应用缓存的文件   尾缀文件名为.manifest

    * 用于配置需要缓存的文件

  * 在不同条件下的内容

                 2.在HTML引入后缀名为manifest的文件

                 3.文件里书写格式

                    CACHE MANIFEST

   ##下面写入你要缓存的文件

                          index.html

                          index.js

                          cdn也可以

                   ApplicationCache

               应用缓存的详细使用

               1.需要在服务端配置应用的缓存文件

               2.在客户端断网的时候保存另一个版本更新应用缓存文件

              

console.log(window.applicationCache)//     //如果让你更新应用的缓存文件//     //已经缓存的文件下一次有网的情况下  加载文件还是缓存的内容//     //解决思路更新应用缓存的配置文件//     //window.applicationCache     onobsolebe//     window.applicationCache.onobsolete=function () {//////             this.swapCache();//         console.log("缓存文件失效");//         window.location.reload();

         

  HTML5中的数据储存的方式

  1.storage

       *sesstionStorage//只有在不关闭的时候才有效

*localStorage//只要不清浏览器缓存就永远保存

   2indexedDB

     indexedDB的基本操作

           打开数据库并开始一个事物；

            创建一个objectstore

   构建一个请求来执行一些数据库操作像增加或提取数据

   通过监听正确类型的事件以等待操作完成

           在操作结果上进行一些操作，可以在request对象中找到

           打开数据库

              windows.indexedDB.open("库名",版本号num）；

               //如果库存在则打开如果不存在就创建

              

            

代码示例：

function open() {    var database=null;    var request = window.indexedDB.open("hanjixin",3);    request.onsuccess=function () {        database=this.result;        console.log("打开成功");        console.log(this.result);        // add();        deletea();    }    request.onupgradeneeded=function () {        var db=this.result;        var tablename="han";        db.deleteObjectStore("han");        console.log("创建成功");        if(!db.objectStoreNames.contains(tablename)){            var objectStore=db.createObjectStore(tablename,{keyPath:"date"});            objectStore.createIndex("haha","haha");            objectStore.createIndex("date","date");            objectStore.createIndex("ddsad","ddsad");        }    }    function add() {        console.log(database);        // var transaction = database.transaction(["hanjixin"], "readwrite")        var transaction = database.transaction("han","readwrite");        var objectStore = transaction.objectStore("han");        objectStore.add({haha:"你愁啥",hehe:"瞅你咋地",date:new Date().getTime()})    }

open（）；

WebSQL

webSQL
是一个操作数据库的对象 里面封装了操作数据库的方法
 
是通过sql语句操作数据库的（创建数据库、建表、增删改查）
Sql语句？是一个可以操作数据库的字符串类似正则的规则  他不会自己执行，需要各个平台单独操作数据库的函数执行 这个sql语句  才能让sql执行
 
在webSQL里面 有执行sql语句的方法 就会去执行sql里面描述的功能
 
webSQL 跟sql语句 是完全独立的两个东西
Sql语句 只要是sqlite类型的数据库 都可以使用 有自己独立的语法
webSQL是前端独有的一个API  
 
特点：
不区分大小写
语句结束之后 分号也是可选的
 
CREATE 创建TABLE    表INSERT 添加UPDATE 更新SELECT 选择查找DELETE 删除
 
 
Sql建表的语句
CREATE TABLE 表的名字 （字段）;
添加数据
INSERT INTO 表的名字 （字段） VALUES(值);
删除数据
DELETE FROM 表的名字 WHERE 字段=值;
修改数据
UPDATE 表的名字 SET 字段=值;
查找数据
SELECT *FROM 表的名字；
SELECT *FROM 表的名字WHERE 字段=值；
 
webSQL:有执行sql的方法
openDatabase：打开数据库的方法
Transaction：获取事务的方法
executeSql：执行sql语句的方法
 
 
 
打开数据库
openDatabase(parms);
参数：
Name 数据库的名字 必传
Version 数据库的版本号 必传
displayName 数据库的名字 必传
estimatedSize 数据库的大小 必传
creationCallback 数据库创建完成的回调 可选
 
db = openDatabase("noteDB","1.0","noteDB",1024*1024*10,function (result) {    console.log(result);    //只有创建数据库成功 才会调用这个回调    db = result;});
 
通过事务对象 操作sql语句
通过数据库的对象 调用transaction函数会得到一个事务对象
可以通过事务对象 执行sql语句的函数
//callback,errorCallback,successCallbackdb.transaction(function (ts) {    console.log(ts);    //通过得到的事务对象 调用执行sql的方法    ts.executeSql("sql语句");});
 
执行SQL语句的函数
executeSql（）
参数：
sqlStatement：sql语句               必传
Arguments 实参的数组（sql的值）     可选
Callback 执行完成时候的回调         可选
errorCallback 出现错误时候的回调    可选
 
db.transaction(function (ts) {    console.log(ts);    //通过得到的事务对象 调用执行sql的方法    //sqlStatement,arguments,callback,errorCallback    ts.executeSql("CREATE TABLE user (id,username,age);");});
 
db.transaction(function (ts) {    console.log(ts);    //通过得到的事务对象 调用执行sql的方法    //sqlStatement,arguments,callback,errorCallback    ts.executeSql(sql,args,function (result) {        console.log(result);    },function (error) {        console.log(error);    });});
 
添加
oprationSQL("INSERT INTO user (id,username,age) VALUES (6,'小ming',23);");
 
删除
oprationSQL("DELETE FROM user WHERE id=0",[],function () {    searchAll();});
 
修改
oprationSQL("UPDATE user SET username='"+username+"' WHERE username='奥特曼';",[],function () {    searchAll();});
 
查询
oprationSQL("SELECT * FROM user;",[],function (result) {    var content = "";    for (var i=0;i<result.rows.length;i++){        content+="<p>"+result.rows[i].username+"</p>"    }    document.body.innerHTML = content;});

              webSQL的封装

function Opendatabase() {}Opendatabase.open = function (config) {    Opendatabase.CONFIG = config;    Opendatabase.CONFIG.db=openDatabase(Opendatabase.CONFIG.name,       Opendatabase.CONFIG.version,Opendatabase.CONFIG.name,Opendatabase.CONFIG.size*1024*1024);};// Opendatabase.open()Opendatabase.oprationSQL=function (sql,agr,callback) {    Opendatabase.CONFIG.db.transaction(function (result) {    result.executeSql(sql,agr,function () {        console.log(arguments);        callback(arguments[1].rows);    })})}Opendatabase.createTable=function (tablename,tablevalue) {    Opendatabase.CONFIG.tablename=tablename;    Opendatabase.CONFIG.tablevalue=tablevalue;    Opendatabase.oprationSQL('CREATE TABLE '+tablename+' ('+tablevalue.toString()+')',[],function (result) {       console.log(result);   })}Opendatabase.addData=function (agr) {    Opendatabase.oprationSQL('INSERT INTO '+Opendatabase.CONFIG.tablename+' ('+Opendatabase.CONFIG.tablevalue.toString()+')'+' VALUES ('+agr.toString()+')',[],function (re) {        console.log(re);    });};Opendatabase.deletedata=function (info) {    //传入删除的键值    var info=info||{};   // DELETE FROM user WHERE id=0    Opendatabase.oprationSQL('DELETE FROM '+Opendatabase.CONFIG.tablename+' WHERE '+info.key+' = "'+info.value+'"',[],function (re) {        console.log(re);    })};Opendatabase.updata=function (info) {    //传入修改的对象的 键 与要替换的内容    var info=info||{};    console.log('UPDATE '+Opendatabase.CONFIG.tablename+' SET '+info.key+' = '+info.value+' WHERE '+info.key+' = '+info.oldvalue);    //UPDATE user SET username='"+username+"' WHERE username='奥特曼'     Opendatabase.oprationSQL('UPDATE '+Opendatabase.CONFIG.tablename+' SET '+info.key+' = "'+info.value+'" WHERE '+info.key+' = "'+info.oldvalue+'"',[],function (re) {         console.log(re);     })};Opendatabase.find=function (Tablename,callback) {    //查找    console.log('SELECT * FROM '+Tablename);    Opendatabase.oprationSQL('SELECT * FROM '+Tablename,[],function (re) {        console.log(re);        callback(re);    })}