小试html5的indexedDB

2018-12-03 15:22:32

小试html5的indexedDB

学不动了学不动了

  1. //db连接
  2. let db = null;
  3. //db名称
  4. let dbName = 'database';
  5. //index名称
  6. let objectStoreName = 'users';
  7. //打开链接
  8. let opener = window.indexedDB.open(dbName,1);
  9. opener.onsuccess = function(event){
  10. db = event.target.result;
  11. }
  12. //在第一次创建db或者是版本号有修改的时候会执行
  13. opener.onupgradeneeded = function(event){
  14. let db = event.target.result;
  15. //创建数据库存储对象
  16. let objectStore = db.createObjectStore(objectStoreName,{
  17. keyPath:'id',
  18. autoIncrement:true
  19. });
  20. //定义存储对象的数据项
  21. objectStore.createIndex('id','id',{
  22. //唯一约束
  23. unique:true
  24. });
  25. objectStore.createIndex('name','name');
  26. objectStore.createIndex('age','age');
  27. }
  28. function create(db,item){
  29. //创建事务
  30. let transaction = db.transaction(objectStoreName,'readwrite');//readonly readwrite versionchange
  31. //通过事务,打开存储对象
  32. let objectStore = transaction.objectStore(objectStoreName);
  33. //插入记录
  34. objectStore.add(item);
  35. }
  36. function update(db,id){
  37. let transaction = db.transaction(objectStoreName,'readwrite');
  38. let objectStore = transaction.objectStore(objectStoreName);
  39. //根据id检索记录,返回游标
  40. let cursor = objectStore.get(id);
  41. cursor.onsuccess = function(event){
  42. //成功检索结果集,如果检索失败,返回 undefined
  43. let row = event.target.result;
  44. //修改记录值
  45. row.name = 'new name';
  46. //使put更新记录
  47. objectStore.put(row);
  48. }
  49. }
  50. function remove(db,id){
  51. let transaction = db.transaction(objectStoreName,'readwrite');
  52. let objectStore = transaction.objectStore(objectStoreName);
  53. //通过id删除记录
  54. objectStore.delete(id);
  55. }
  56. function foreach(db){
  57. let transaction = db.transaction(objectStoreName,'readwrite');
  58. let objectStore = transaction.objectStore(objectStoreName);
  59. let cursor = objectStore.openCursor();
  60. cursor.onsuccess = function(event){
  61. let cursor = event.target.result;
  62. if(cursor){
  63. let value = cursor.value;
  64. //遍历到的值
  65. console.log(value);
  66. cursor.continue();//继续遍历
  67. }else{
  68. //遍历完毕
  69. }
  70. }
  71. }
  72. function rangeEach(db,start,end){
  73. let transaction = db.transaction(objectStoreName,'readwrite');
  74. let objectStore = transaction.objectStore(objectStoreName);
  75. /*
  76. bound(start,end,lowerOpen,upperOpen);
  77. id范围内,后面俩bool参数可以设置是否包含开始和结束(默认都为true)
  78. only(id);
  79. 仅仅是指定的id
  80. lowerBound(id);
  81. 小余参数的id
  82. upperBound(id);
  83. 大于参数的id
  84. */
  85. //创建范api,表示仅仅检索id start - end 之间的数据
  86. let range = IDBKeyRange.bound(start,end);
  87. //判断range检索的范围,是否包含了id = 5的记录,返回 bool
  88. let include = range.includes(5);
  89. //通过范围api创建游标
  90. let cursor = objectStore.openCursor(range);
  91. cursor.onsuccess = function(event){
  92. let cursor = event.target.result;
  93. if(cursor){
  94. let value = cursor.value;
  95. //遍历到的值
  96. console.log(value);
  97. cursor.continue();//继续遍历
  98. }else{
  99. //遍历完毕
  100. }
  101. }
  102. }

0
0
0

添加评论

正在回复:
取消
3
0
0
0