<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.a=1; console.log(localStorage); </script> </body> </html>
打開控制臺--application--localStorage
可以直接手動修改存盤的資料
HTML5資料庫--indexedDB
indexedDB.open() 創建資料庫
注意查看資料庫時需要在indexedDB上右鍵重繪
查看indexedDB總共有哪些方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",1); console.log(request); </script> </body> </html>
onsuccess
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",4); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } </script> </body> </html>
onerrror
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",2); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } </script> </body> </html>
onupgradeneeded 版本升級
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",6); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); } </script> </body> </html>
創建表
indexedDB.createObjectStore
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",7); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test"); } </script> </body> </html>
設定主鍵的2種方法：
1、設定自增主鍵 autoIncrement:true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",7); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test",{autoIncrement:true}); } // var json={ // "id":1001, // "name":"cyy", // "age":25 // }; var json={ "id":1002, "name":"cyy2", "age":25 }; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test","readwrite"); //指定存盤操作 var store=transaction.objectStore("test"); //存入資料 store.add(json); },300) </script> </body> </html>
2、取資料中欄位為主鍵 keyPath: 欄位名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",8); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test2",{keyPath:"id"}); } var json={ "id":1001, "name":"cyy", "age":25 }; // var json={ // "id":1002, // "name":"cyy2", // "age":25 // }; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test2","readwrite"); //指定存盤操作 var store=transaction.objectStore("test2"); //存入資料 store.add(json); },300) </script> </body> </html>
使用事務獲取表
indexedDB-->transaction-->objectStore
事務模式
readwrite 讀寫 readonly 只讀
增加資料 .add
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",8); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test2",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test2","readwrite"); //指定存盤操作 var store=transaction.objectStore("test2"); //增加資料 //store.add(json); //增加資料 for(var i=0;i<json.length;i++){ store.add(json[i]); } },300) </script> </body> </html>
獲取資料 .get
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",8); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test2",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test2","readwrite"); //指定存盤操作 var store=transaction.objectStore("test2"); //增加資料 //store.add(json); //增加資料 // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //獲取資料 get(key) var requestNode=store.get(1001); requestNode.onsuccess=function(){ console.log(requestNode); console.log(requestNode.result.name); console.log(requestNode.result.age); } },300) </script> </body> </html>
自增主鍵的key值獲取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",9); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); //增加資料 //store.add(json); //增加資料 for(var i=0;i<json.length;i++){ store.add(json[i]); } //獲取資料 get(key) //自增主鍵的id從1開始 var requestNode=store.get(1); requestNode.onsuccess=function(){ console.log(requestNode); console.log(requestNode.result.name); console.log(requestNode.result.age); } },300) </script> </body> </html>
獲取所有資料 getAll
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); //增加資料 //store.add(json); //增加資料 for(var i=0;i<json.length;i++){ store.add(json[i]); } //獲取資料 get(key) //自增主鍵的id從1開始 var requestNode=store.getAll(); requestNode.onsuccess=function(){ console.log(requestNode); for(var i=0;i<requestNode.result.length;i++){ console.log(requestNode.result[i].name); console.log(requestNode.result[i].age); } } },300) </script> </body> </html>
修改資料 .put
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); //增加資料 // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //補加資料 store.put({ "id":1004, "name":"cyy4", "age":25 }); },300) </script> </body> </html>
.delete 洗掉資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); //洗掉資料 store.delete(4); },300) </script> </body> </html>
.clear 清除所有資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); //清空資料 store.clear(); },300) </script> </body> </html>
onsuccess 執行查詢完成后的回呼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); var requestNode=store.put({ "id":1003, "name":"cyy3", "age":25 }); requestNode.onsuccess=function(){ console.log("資料追加成功"); } },300) </script> </body> </html>
result 可以看到相關資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",10); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; db.createObjectStore("test3",{autoIncrement:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); var requestNode=store.put({ "id":1003, "name":"cyy3", "age":25 }); requestNode.onsuccess=function(){ console.log(requestNode.result); } },300) </script> </body> </html>
創建索引 createIndex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",12); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 store.createIndex("test3","name",{unique:false}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); for(var i=0;i<json.length;i++){ store.add(json[i]); } },300) </script> </body> </html>
如果設定unique為true，但又存在同名欄位，則資料添加失敗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",13); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 store.createIndex("test3","name",{unique:true}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); for(var i=0;i<json.length;i++){ store.add(json[i]); } },300) </script> </body> </html>
使用索引獲取資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",15); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 通過name查找 store.createIndex("test3","name",{unique:false}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //通過索引查找資料 var index=store.index("test3"); index.get("cyy2").onsuccess=function(e){ console.log(e.target.result); } },300) </script> </body> </html>
使用索引的好處
1、可以使用存盤記錄中的值進行檢索
2、索引自動更新
3、索引資料自動排序
創建游標
.openCursor()
游標范圍：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",15); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //創建游標 var requestNode=store.openCursor(IDBKeyRange.only(1004)); requestNode.onsuccess=function(){ console.log(requestNode.result.value); } },300) </script> </body> </html>
帶范圍的回圈輸出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",15); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //創建游標 var requestNode=store.openCursor(IDBKeyRange.upperBound(1002)); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",15); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //創建游標 var requestNode=store.openCursor(IDBKeyRange.bound(1002,1004)); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
設定游標的direction
next 順序查詢 prev 逆序查詢
nextunique 順序唯一查詢 prevunique 逆序唯一查詢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",15); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); } var json=[{ "id":1001, "name":"cyy", "age":25 },{ "id":1002, "name":"cyy2", "age":25 },{ "id":1003, "name":"cyy3", "age":25 },{ "id":1004, "name":"cyy3", "age":25 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //創建游標 var requestNode=store.openCursor(IDBKeyRange.bound(1002,1004),"prev"); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
使用游標的好處：
1、可以查詢指定資料集范圍
2、擁有逆序遍歷能力
索引和游標的結合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",16); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 store.createIndex("test3","age",{unique:true}); } var json=[{ "id":1001, "name":"cyy", "age":21 },{ "id":1002, "name":"cyy2", "age":22 },{ "id":1003, "name":"cyy3", "age":23 },{ "id":1004, "name":"cyy3", "age":24 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //索引 var index=store.index("test3"); //游標 var requestNode=index.openCursor(IDBKeyRange.upperBound(23)); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
.update 在查詢操作中更新資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",16); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 store.createIndex("test3","age",{unique:true}); } var json=[{ "id":1001, "name":"cyy", "age":21 },{ "id":1002, "name":"cyy2", "age":22 },{ "id":1003, "name":"cyy3", "age":23 },{ "id":1004, "name":"cyy3", "age":24 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //索引 var index=store.index("test3"); //游標 var requestNode=index.openCursor(IDBKeyRange.upperBound(23)); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ if(cursor.value.name=="cyy2"){ cursor.update({ "id":1002, "name":"cyy2_2", "age":22 }); } console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
delete 查詢操作中洗掉資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> var request=indexedDB.open("textDB",16); //資料庫不存在則創建，存在則打開 //第二個引數是版本號，只能比上一次增加，不能減少，否則會報錯 request.onsuccess=function(){ console.log("創建資料庫成功~"); } request.onerror=function(){ console.log("讀取資料庫失敗~"); } request.onupgradeneeded=function(){ console.log("版本號升級啦~"); //創建資料表 var db=request.result; var store=db.createObjectStore("test3",{keyPath:"id"}); //創建索引 store.createIndex("test3","age",{unique:true}); } var json=[{ "id":1001, "name":"cyy", "age":21 },{ "id":1002, "name":"cyy2", "age":22 },{ "id":1003, "name":"cyy3", "age":23 },{ "id":1004, "name":"cyy3", "age":24 }]; setTimeout(function(){ //獲取資料庫 var db=request.result; //指定表名和打開方式 var transaction=db.transaction("test3","readwrite"); //指定存盤操作 var store=transaction.objectStore("test3"); // for(var i=0;i<json.length;i++){ // store.add(json[i]); // } //索引 var index=store.index("test3"); //游標 var requestNode=index.openCursor(IDBKeyRange.upperBound(23)); requestNode.onsuccess=function(){ //帶范圍的回圈輸出 var cursor=requestNode.result; if(cursor){ if(cursor.value.name=="cyy2_2"){ cursor.delete().onsuccess=function(){ console.log("資料洗掉成功"); } } console.log(cursor.value); cursor.continue(); } } },300) </script> </body> </html>
indexedDB 與 webStorage 比較
indexedDB 優勢：
存盤型別豐富，條件搜索優勢明顯，可以在worker中使用，存盤容量更大
indexedDB 劣勢：
兼容性問題明顯
IOS 8-9 不支持（iphone6 iphone6s）
firefox單次存盤blob資料超過50M會拋例外
IE10&11有部分子功能未實作
跨域存盤限制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/7046.html
標籤：HTML5