中国领先的IT技术网站
|
|

浅谈浏览器本地存储-indexedDB

indexedDB 是 HTML5 提供的一种本地存储,一般用户保存大量用户数据并要求数据之间有搜索需要的场景,当网络断开的时候,可以做一些离线应用,它比 SQL 方便,不用去写一些特定的语句对数据进行操作,数据格式为 json。

作者:佚名来源:稀土掘金|2017-09-27 08:44

开发者大赛路演 | 12月16日,技术创新,北京不见不散


indexedDB 是 HTML5 提供的一种本地存储,一般用户保存大量用户数据并要求数据之间有搜索需要的场景,当网络断开的时候,可以做一些离线应用,它比 SQL 方便,不用去写一些特定的语句对数据进行操作,数据格式为 json。

步骤:

1. 创建数据库,并指定数据库的版本号

  1. var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 
  2. var request = indexedDB.open(databasename, version); 
  3. request.onerror = function(e){ 
  4.     // 创建失败回调函数 
  5. }; 
  6. request.onsuccess = function(e){ 
  7.     // 创建成功回调函数 
  8. }; 
  9. request.onupgradeneededd = function(e){ 
  10.     // 当数据库改变是回调函数 
  11. }; 

注意这里的版本号只可以是整数

2. 建立对象存储空间

  1. request.onupgradeneeded = function(event) {  
  2.   var db = event.target.result; 
  3.   var objectStore = db.createObjectStore("name", { keyPath: "id" }); 
  4. }; 

3. 数据的增、删、改、查

  1. // 增 
  2. addData:function(db,storename,data){ 
  3.     var store = store = db.transaction(storename,'readwrite').objectStore(storename),request; 
  4.     for(var i = 0 ; i < data.length;i++){ 
  5.         request = store.add(data[i]); 
  6.         request.onerror = function(){ 
  7.             console.error('add添加数据库中已有该数据'
  8.         }; 
  9.         request.onsuccess = function(){ 
  10.             console.log('add添加数据已存入数据库'
  11.         }; 
  12.     } 
  13.  

添加数据,重复添加会报错

  1. // 删 
  2. deleteData:function(db,storename,key){ 
  3.     var store = store = db.transaction(storename,'readwrite').objectStore(storename); 
  4.     store.delete(key
  5.     console.log('已删除存储空间'+storename+'中'+key+'记录'); 
  6. // 改 
  7. putData:function(db,storename,data){ 
  8.     var store = store = db.transaction(storename,'readwrite').objectStore(storename),request; 
  9.     for(var i = 0 ; i < data.length;i++){ 
  10.         request = store.put(data[i]); 
  11.         request.onerror = function(){ 
  12.             console.error('put添加数据库中已有该数据'
  13.         }; 
  14.         request.onsuccess = function(){ 
  15.             console.log('put添加数据已存入数据库'
  16.         }; 
  17.     } 

重复添加已经存在的数据会更新原有数据

  1. // 查 
  2. getDataByKey:function(db,storename,key){ 
  3.     var store = db.transaction(storename,'readwrite').objectStore(storename); 
  4.     var request = store.get(key); 
  5.     request.onerror = function(){ 
  6.         console.error('getDataByKey error'); 
  7.     }; 
  8.     request.onsuccess = function(e){ 
  9.         var result = e.target.result; 
  10.         console.log('查找数据成功'
  11.         console.log(result); 
  12.     }; 

根据存储空间的键找到对应数据,本例为 id

4. 关闭数据库

  1. db.close(); 

2.使用场景

掌握了使用步骤之后,我们来结合它的优、缺点谈谈其使用场景。

  • 不适合过大的数据存储,浏览器对 indexDB 有 50M 大小的限制
  • 不适合对兼容性要求高的项目
  • 不适合存储敏感数据
  • 当用户清除浏览器缓存的时候可能出现问题
  • indexedDB 受到同源策略的限制

【编辑推荐】

  1. 软件定义存储vs超融合
  2. NVMe Over Fabrics会让直接连接存储(DAS)消亡吗?
  3. 公共云存储服务优化性能贴士
  4. 为什么不变性是云存储中的标准特征
  5. 大数据和固态硬盘在公共云存储市场上的发展
【责任编辑:武晓燕 TEL:(010)68476606】


点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多

读 书 +更多

网管第一课——计算机网络原理

本书是《网管第一课》系列图书中的第一本,是专门针对高校和培训机构编写的,其主要特点是内容细而精、针对性强。书中内容全是经过精心挑选...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 51CTO学院双十二活动