都市惠,造梦西游3青云冰刀怎么得,普法栏目剧再见青春
我要评论<!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有部分子功能未实现
跨域存储限制
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）
html5 移动端视频video的android兼容(去除播放控件、全屏)
网友评论