小白入门---HTML5中数据的存储方式

HTML5中数据的存储方式

1、Storage:分为以下2种：

1.sesstionStorage:只在不关闭浏览器页面的情况下数据有效，只要关闭浏览器就会清除保存的数据
2.localStotrage:只要不清楚缓存，保存在浏览器里面的数据一直会存在。
3.Example：

sessionStorage.setItem("userName","xiaoming");//在application里面的sessionStorage里就会保存姓名为小明的值sessionStorage.getItem("userName");//获取到小明并直接输出，localStotrage类似

2、indexedDB：数据库

》indexedDB:是一个nosql，都是以对象的方式去存储，只要不清除缓存永远存在
》 indexDB可以做什么：可以配合应用缓存做离线应用，为了大量存储结构化的数据；也可以在没有网的情况下阅览近期浏览过的新闻
》基本操作：

1.打开数据库并且开始一个事务。(事务就类似于一个平台，可以提供表演的地方)
2.创建一个object store。
3.创建一个请求来执行一些数据库操作，像增加或提取数据等
4.通过监听正确类型的DOM事件以等待操作完成
5.在操作结果上进行一些操作(可以再request中找到)

》 使用流程：

1.判断浏览器是不是支持indexedDB： indexedDB?alert(“支持”)：alert(“不支持”);
2.indexedDB.open(“mysql”，数据库版本号);如果数据库存在就打开，不存在就创建一个 —> IDBOpenDBRequest请求对象:监听事件：

》onerror：创建或者打开数据库失败的时候调用，得到一个错误提示；
》 onsuccess：创建或者打开数据库成功的时候调用，成功的时候的到一个this.result就是我们需要的数据库；
》 onupgradeneeded：只有在数据库的版本号更新的时候调用

3.创建类似于BMOB里面的某个表(也可以想象成一个数据模型)：通过ObjectStore进行操作(增删改查建表)

》建表(创建类)：数据库对象(IDBOpenDBRequest.result).createObjectStore(“名字”，{设置这个类里面可以找到某一个对象的属性})
》创建字段方法(给创建的类添加属性)：objectStore的对象.createIndex(“属性名”，{可选项})

4.开始增删改查的一系列步骤(任何操作都会返回一个request对象)
》添加objectStore.add()
》删除objectStore.delete()
》更改objectStore.put()
》查询objectStore.get()

》**Example:

(function(){    var database=null;//声明一个数据库的全局变量,因为加载成功和版本更新成功的时候都会有结果    //2.创建打开数据库DB(DATABASE)    function openDB(){        var request=indexedDB.open("noteDB",1);        request.onerror=function(){            console.log(error);        };        request.onsuccess=function(){            console.log("打开数据库成功");            database=this.result;            console.log(searchAll());            searchAll().onsuccess=function(){                console.log(this.result);            };            search();            deleteData();            update();        };        //只在数据库版本号两次不一致的情况下调用        request.onupgradeneeded=function(){            /*3.建表：不需要每次都去建表。从没有数据库到有数据库，数据库版本号更新的时候，再去建表，查询数据库中是不是存在同样的表，如果存在也就不再创建了            onupgradeneeded可以监听数据库版本号的变更，可以通过IDBDataBase里面的objectStoreNames查看数据库里面都创建了那些表名。            */            console.log("更新数据库成功",this);                        var db=this.result;//数据库对象            var tableName="note";            if(!db.objectStoreNames.contains(tableName)){//使用contains判断是不是包含某个表名                console.log("可以建表了~~~");                             var objectStore=db.createObjectStore(tableName,{keyPath:"date"});//具体建表方法,添加一个键路径，date是唯一的                objectStore.createIndex("title","title");//创建表里面的字段，需要至少传入2个参数，分别是字段名和通过哪一个名字可以查到这个字段对应的内容                objectStore.createIndex("content","content");                objectStore.createIndex("date","date");            }        };      }    /*4.添加数据：增删改查的操作：     * 1):db->transaction()->获得到事物的对象     * 2):事物的对象->objectStore     * 3):objectStore:即可进行增删改查     */    function addData(info){        var transaction=database.transaction(["note"],"readwrite");//获得到事务的对象,必须是数字类型的        var objectStore=transaction.objectStore("note");//获取存放某一类型数据的容器(类似类)        console.log(objectStore.add(info)) ;//添加数据，info是一个对象类型的数据    }    /*5.查询数据：get()；getAll():会得到一个IDBRequest，可以通过监听事件成功，获得到查询到的数据     * 如果查询单个key对应的数据可以通过get(key)     * 注意事项：任何数据库的操作，更新字段，表，需要先清除原来的数据库     * 如果是查找、删除、修改具体的内容的时候需要根据一个唯一值查找     */    function searchAll(){        return database.transaction(["note"],"readonly").objectStore("note").getAll();          }    function search(){        database.transaction(["note"],"readonly").objectStore("note").get(1502182945505).onsuccess=function(){            console.log(this.result);        };    }    function deleteData(){      database.transaction(["note"],"readwrite").objectStore("note").delete(1502182945505).onsuccess=function(){            console.log(this);        };    }    function update(){      database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新数据",content:"更新数据",date:1502243080473}).onsuccess=function(){            console.log(this);        };    }    function loadView(){        var titleInput=document.querySelector(".addNoteView input");        var contentInput=document.querySelector(".addNoteView textarea");        var saveButton=document.querySelector(".addButton");        saveButton.onclick=function(){            var title=titleInput.value;            var content=contentInput.value;            var timeStamp=new Date().getTime();            addData({                title:title,                content:content,                date:timeStamp            });        }           }    //1.浏览器是不是支持    function init(){        if(!indexedDB){            return;        }        openDB();        loadView();    }    init();})();

3、webSQL:数据库

》sql语句:脚本语言，是一个可以操作数据库的字符串，类似正则的规则，他不会自己执行，需要各个平台单独操作数据库的函数执行这个sql语句才能够让sql语句执行。

》在webSQL里面有执行sql语言的方法->就会去执行sql里面描述的功能。不区分大小写，也有关键字，语句结束后分号可选

》常用关键字：CREATE：创建 TABLE：表 INSERT：添加 UPDATE：更新 SELECT：选择 DELETE：删除

》webSQL和sql语言是2个不同的东西：

》sql语句只要是sqlite类型的数据库，都可以使用,有自己独立的语法
》webSQL是前端独有的API，里面有执行sql的方法：openDatabase(打开数据库的方法)，Transaction(获取事务的方法),executeSql(执行sql语句的方法)

》Sql语句：

建表：CREATE TABLE 表的名字 (字段)
添加数据：INSERT INTO 表的名字 (字段) VALUES(值)
删除数据：DELETE FROM 表的名字 WHRER 字段=值；
修改数据：UPDATE 表的名字 SET 字段=值；
查找数据：SELETE * FROM 表的名字/SELETE * FROM 表的名字 WHERE 字段=值

》**Example：面向过程

(function(){    var db=null;    /*1.打开数据库的方法本身就返回一个数据的对象，所以在打开数据库的时候就可以直接接收数据库对象。     传的参数：name(数据库的名字，必传),     version(版本号，必传),     displayName(显示的名字，必传),     estimatedSize(数据库大小以k为单位，必传),     creationCallback(数据库创建完的回调，可选)*/    function openDB(){        db=openDatabase("noteDB","1.0","noteDB",1024*1024*10,function(result){            console.log(result);            db=result;//只有创建数据库成功的时候才会去调用这个回调函数        });    }    /*2.获取事务对象transaction:需要传的参数：callback，errorCallback，successCallback*/    function operationSQL(sql,args,callback){        db.transaction(function(ts){            console.log(ts);//通过数据库对象调用transaction()->得到事务对象            ts.executeSql(sql,args,function(transaction,arguments){                console.log(arguments);//传入的args                if(callback){                    callback(result);                }            },function(error){                console.log(error);            });//通过得到的事务对象执行SQL语句的方法,executeSql():需要传的参数：sqlStatement(sql语句，必传),Arguments(实参数组，sql语句里面值得数组，可选),Callback(执行完成时候的回调，可选),errorCallback(出现错误时候的回调，可选)        });    }    function createTable(){        operationSQL("CREATE TABLE user (id,username,age);");    }    function addData(){        operationSQL("INSERT INTO  user (id,username,age) VALUES (0,'XIAOMING',20);");    }    function searchAll(){        operationSQL("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;        });    }    function deleteData(){        operationSQL("DELETE FROM user WHERE id=1;",[],function(){            searchAll();//更新下html内容        });    }    function changeData(){//      operationSQL("UPDATE user SET username='小明' WHERE username='XIAOMING';",[],function(){//          searchAll();//      });        operationSQL("UPDATE user SET username=? WHERE username='XIAOMING';",["奥特曼"],function(){            searchAll();        });//带参数的修改数据的方法：?表示占位符，将所有XIAOMING修改为奥特曼    }    function init(){        openDB();        createTable();        addData();        searchAll();        deleteData();        changeData();    }    init(); })();

》**Example：面向对象

window.webSQL=window.webSQL||{};(function(){    function DBManager(tableName){        this.tableName=tableName;        this.db=null;        this.openDB();//      this.operationSQL(sql);//      this.createTable("id,username,age");//      this.addData("id,username,age","'1','wangdapao','23'");        this.searchAll();//      this.deleteData();        this.changeData('wangdapao1','wangdapao');    }    DBManager.prototype.openDB=function(){        this.db=openDatabase("noteDB","1.0","noteDB",1024*1024*10);    }    DBManager.prototype.operationSQL=function(sql,args,callback){        this.db.transaction(function(ts){            console.log(ts);            ts.executeSql(sql,args,function(transaction,result){                console.log(result);                if(callback){                    callback(result);                }            },function(error){                console.log(error);            });        });    };    DBManager.prototype.createTable=function(colums){        var sql="CREATE TABLE "+this.tableName+"("+colums.toString()+");";        this.operationSQL(sql);    };    DBManager.prototype.addData=function(colums,values){        var sql="INSERT INTO "+this.tableName+"("+colums.toString()+") VALUES"+"("+values+");";        this.operationSQL(sql);    };    DBManager.prototype.searchAll=function(){        var sql="SELECT * FROM "+this.tableName+";";        this.operationSQL(sql,[],function(result){//          console.log(result)            var content="";            for(var i=0;i<result.rows.length;i++){                content+="<p>"+result.rows[i].username+"</p>";            }            document.body.innerHTML=content;        });         };    DBManager.prototype.deleteData=function(){        var sql="DELETE FROM "+this.tableName+" WHERE id='1';";        this.operationSQL(sql,[],function(){            this.searchAll();        }.bind(this));    };    DBManager.prototype.changeData=function(newvalue,oldvalue){        var sql="UPDATE "+this.tableName+" SET username=? WHERE username='"+oldvalue+"';";        this.operationSQL(sql,[newvalue],function(){            this.searchAll();        }.bind(this));    };    webSQL.DBManager=DBManager;})();new webSQL.DBManager('user1');