<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>localstorage</body> script> localstorage.a=1; console.log(localstorage); HTML>
打开控制台--application--localstorage
可以直接手动修改存储的数据
HTML5数据库--indexedDB
indexedDB.open() 创建数据库
注意查看数据库时需要在indexedDB上右键刷新
查看indexedDB总共有哪些方法：
> var requestindexedDB.open("textDB,); console.log(request); >
onsuccess
4); //数据库不存在则创建，存在则打开 第二个参数是版本号，只能比上一次增加，不能减少，否则会报错 request.onsuccessfunction(){ console.log(创建数据库成功~); } request.onerror读取数据库失败~); } >
onerrror
2>
onupgradeneeded 版本升级
6); } request.onupgradeneeded版本号升级啦~>
创建表
indexedDB.createObjectStore
7); 创建数据表 dbrequest.result; db.createObjectStore(test>
设置主键的2种方法：
1、设置自增主键 autoIncrement:true
true}); } var Json={ "ID":1001, "name":"cyy",1)"> "age":25 }; Json{ ID:1002namecyy2age25 }; setTimeout((){ 获取数据库 request.result; 指定表名和打开方式 transactiondb.transaction(reaDWrite); 指定存储 *** 作 storetransaction.objectStore(存入数据 store.add(Json); },1)">300) >
2、取数据中字段为主键 keyPath: 字段名
8test21001cyy }; "ID":1002,1)"> "name":"cyy2",1)"> }; setTimeout(>
使用事务获取表
indexedDB-->transaction-->objectStore
事务模式
reaDWrite 读写 Readonly 只读
增加数据 .add
[{ },{ 1003cyy3 }]; setTimeout(增加数据 store.add(Json); for(var i=0;i<Json.length;i++){ store.add(Json[i]); } },1)">>
获取数据 .get
for(var i=0;i<Json.length;i++){ store.add(Json[i]); } 获取数据 get(key) requestNodestore.get(); requestNode.onsuccess(){ console.log(requestNode); console.log(requestNode.result.name); console.log(requestNode.result.age); } },1)">>
自增主键的key值获取
9test3for( i0;i<Json.length;i++){ store.add(Json[i]); } 自增主键的ID从1开始 >
获取所有数据 getAll
10store.getAll(); requestNode.onsuccess(){ console.log(requestNode); requestNode.result.length;i){ console.log(requestNode.result[i].name); console.log(requestNode.result[i].age); } } },1)">>
修改数据 .put
); } 补加数据 store.put({ 1004cyy4 }); },1)">>
.delete 删除数据
删除数据 store.delete); },1)">>
.clear 清除所有数据
清空数据 store.clear(); },1)">>
onsuccess 执行查询完成后的回调
store.put({ }); requestNode.onsuccess(){ console.log(数据追加成功); } },1)">>
result 可以看到相关数据
(){ console.log(requestNode.result); } },1)">>
创建索引 createIndex
12db.createObjectStore(}); 创建索引 store.createIndex(false}); } ){ store.add(Json[i]); } },1)">>
如果设置unique为true，但又存在同名字段，则数据添加失败
13>
使用索引获取数据
15创建索引 通过name查找通过索引查找数据 indexstore.index(); index.get().onsuccess(e){ console.log(e.target.result); } },1)">>
使用索引的好处
1、可以使用存储记录中的值进行检索
2、索引自动更新
3、索引数据自动排序
创建游标
.openCursor()
游标范围：
}); } 创建游标 store.openCursor(IDBKeyRange.only()); requestNode.onsuccess(){ console.log(requestNode.result.value); } },1)">>
带范围的循环输出
store.openCursor(IDBKeyRange.upperBound((){ 带范围的循环输出 cursorrequestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); } } },1)">>
store.openCursor(IDBKeyRange.bound(>
设置游标的direction
next 顺序查询 prev 逆序查询
nextunique 顺序唯一查询 prevunique 逆序唯一查询
),1)">prev>
使用游标的好处：
1、可以查询指定数据集范围
2、拥有逆序遍历能力
索引和游标的结合使用
1621222324索引 游标 index.openCursor(IDBKeyRange.upperBound((); } } },1)">>
.update 在查询 *** 作中更新数据
(cursor){ (cursor.value.name==){ cursor.update({ cyy2_2 }); } console.log(cursor.value); cursor.>
delete 查询 *** 作中删除数据
){ cursor.().onsuccess(){ console.log(数据删除成功); } } console.log(cursor.value); cursor.>
indexedDB 与 WebStorage 比较
indexedDB 优势：
存储类型丰富，条件搜索优势明显，可以在worker中使用，存储容量更大
indexedDB 劣势：
兼容性问题明显
IOS 8-9 不支持（iphone6 iphone6s）
firefox单次存储blob数据超过50M会抛异常
IE10&11有部分子功能未实现
跨域存储限制
总结
以上是内存溢出为你收集整理的HTML5存储之indexedDB全部内容，希望文章能够帮你解决HTML5存储之indexedDB所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）