HTML5中数据存储的方式:


1.storage


2.webSQL(数据库)


html5简单存储 html5存储方法_html5简单存储





storage:


两个方法:


setltem(key,value);


getitem(key);


1.sessionStorage:只在不关闭浏览器的情况下,数据有效,



只要关闭掉浏览器就会,清除保存的数据;



2.localStorage:只要不清除缓存,保存到浏览器的数据,一直存在;



IndexedDB是一个NOSQL,都是以对象的方式去存储;





indexedDB的基本操作:



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





使用流程(1.打开数据库 2.建表 3.增删改查)



1.判断浏览器是不是支持 indexedDB



indexedDB?alert("支持"):alert("不支持");





2.打开数据库


// 打开/创建数据库var request = window.indexedDB.open("MyTestDatabase");
 
  
indexedDB.open("MyTestDatabase"); ->   
   IDBOpenDBRequest 
    
 
  
  
   IDBOpenDBRequest 
    :


监听事件:生成处理函数



①request. onerror = function(event) { // Do something with request.errorCode!};



创建或者打开数 据库失 败的时候,调用






②request. onsuccess with request.result!};







创建或者打开数据库成功的时候,调用






③该事件仅在较新的浏览器中被实现request. onupgradeneeded = function(event) {



// 更新对象存储空间和索引 .... };



只在数据库的版本号,更新的时候调用







3.创建类似于BMOB里面的某个表(也可以想象为是一个数据模型)



通过ObjectStorage进行操作(增删改查建表)



①.建表(创建类):使用数据库的对象



.createObjectStore("名字",设置唯一字段(设置这个类里面可以找到某一个对象的属性));



②.创建字段(给创建的类,添加属性)ObjectStore的对象 .createIndex("属性名");





4.增删改查的操作


objactStore.add():
 
  
objactStore.delete():
 
  
objactStore.put();
 
  
objactStore.get();





代码示例:



1.打开数据库:


(function () {
 
  
 
   
 
  
//创建、打开数据库(database)
 
  
function openDB() {
 
  
var request = indexedDB.open("noteDB",1);
 
  
 
   
 
  
request.onerror = function (error) {
 
  
console.log(error);
 
  
};
 
  
request.onsuccess = function () {
 
  
console.log("打开数据库成功");
 
  
};
 
  
 
   
 
  
//只在数据库版本号两次不一致的情况下,调用
 
  
request.onupgradeneeded = function () {
 
  
//在建表的时候,不需要每次都去创建,
 
  
//可以在数据库更新版本号再创建
 
  
console.log("更新数据库成功",this);
 
  
};
 
  
}
 
  
//浏览器是不是支持
 
  
function init() {
 
  
if(!indexedDB){
 
  
return;
 
  
}
 
  
}
 
  
openDB();
 
  
})();



2.建表



从没有数据库到有数据库、数据库的版本号更新的时候,再去建表。



查询数据库中是不是存在同样的表,如果存在,不创建;



onupgradeneeded 可以监听数据库版本号的变更;



可以通过  IDBDatabase 里面的 objectStoreNames 查看数据库里面都创建了哪些表名



html5简单存储 html5存储方法_浏览器_02



var objectStore = db.createObjectStore(tableName);
 
  
//创建表里面的字段(列)
 
  
//创建字段的时候,需要至少传入两个参数
 
  
//1.字段的名字2.可以通过哪个名字,查找到这个字段对应的内容;
 
  
objectStore.createIndex("title","title");
 
  
objectStore.createIndex("content","content");
 
  
objectStore.createIndex("date","date");




3.增删改查的操作



①.db -> transaction() -> 获得事务的对象



②.事物的对象 -> objectStore



③.objectStore -> 增删改查




//添加数据function addData(info) {
 
  
    //获得到事务的对象    var transaction = database.transaction(["note"],"readwrite");
 
  
    //存放某一种类型数据的容器(类似类)    var objectStore = transaction.objectStore("note");
 
  
//    执行增删改查的操作    return objectStore.add(info);}




查询操作



get();
 
  
getAll();
 
  
 
   
 
  
function searchAll() {
 
  
 
   
 
  
return database.transaction(["note"],"readonly").objectStore("note").getAll();
 
  
 
   
 
  
}





会得到一个IDBRequest对象, 可以通过监听成功事件, 获得到查询到的数据



request.onsuccess = function () {
 
  
console.log("打开数据库成功");
 
  
database = this.result;
 
  

 
  
 
   searchAll().onsuccess = function () {
 
  
console.log(this.result);
 
  
};
 
  
 
   
 
  
};



如果查询单个key对应的数据可以通过get(key)查询



database.transaction(["note"],"readonly").objectStore("note").get(1502242969880).onsuccess=function() {
 
  
 
  
 
  
 
  
 
  
console.log(this);
 
  
};





删除数据

database.transaction(["note"],"readwrite").objectStore("note").delete(1502242969880).onsuccess=function() {
 
  
console.log(this);
 
  
};





更新数据




database.transaction(["note"],"readwrite").objectStore("note").put({title:"更新数据",content:"更新数据",date:1502183031380}).onsuccess=
 
  
function() {
 
  
console.log(this);
 
  
};





需要注意的事项



任何数据库的操作,更新字段、表,需要先清除原来的数据



如果是查找、删除、修改具体的内容的时候。需要根据一个唯一值查找