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

最新推荐文章于 2024-04-20 05:50:22 发布

Richer_wangx

最新推荐文章于 2024-04-20 05:50:22 发布

阅读量687

点赞数

分类专栏： WEB前端HTML5 文章标签： html5

本文链接：https://blog.csdn.net/Miss_wangdapao/article/details/77012385

版权

WEB前端HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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');