<!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有部分子功能未实现
跨域存储限制