(实战)indexedDB + webSocket实现数据持久化保存数据

栏目: Html5 · 发布时间: 5年前

前端为什么要实现数据持久化?(也就是保存数据到浏览器)。很多时候前端都是从后端接口获取数据,离开了网络,我们就没有办法和后台通讯,也就没办法拿到数据组装页面。为了解决这种尴尬的情况,将数据保存在浏览器,就算没有网络我们也能从浏览器拿到数据。
复制代码

二、实现数据持久化方法

前端实现数据持久化的方法有不少,例如localstorage,sessionstorage,离线缓存(application cache),IndexedDB,Web SQL等等。
复制代码

三、项目需求

最近项目需要实现一个消息推送功能,需求是:
    前端和后端持续保持通讯连接,后台接收到紧急的消息就将其推送给前端。但这些消息后台不存数据库,所以只能由前端保存。

分析:
    1、传统的http请求只能从前端发起,后台响应返回消息。后台不能主动推送消息给前端。所以http不适合项目需求,只能通过长连接websocket实现。
    2、前端保存数据的话,由于推送的消息可能会有很多,localstorage,sessionstorage等只能保存几M的数据,所以不适合。
    最后决定用[indexedDB](http://www.tfan.org/using-indexeddb/)实现,它的好处是易操作,有通俗易懂的api,并且可以保存大量数据。
复制代码

四、实现过程

好了,不说废话,直接开始打码。
1、打开indexedDB数据库用window.indexedDB.open

//DBname是打开的数据库名称,version是数据库版本号
const request = window.indexedDB.open(DBname, version);

//监听数据库打开失败的事件
  request.onerror = (e) => {};
  
//监听数据库打开成功的事件
  request.onsuccess = (e) => {};
  
//监听数据库更新的事件,该事件一般在数据库初次建立,或者数据库的字段有改变(新增字段,删除字段等),或者数据库版本号改变时就会触发。
  request.onupgradeneeded = (e) => {
    //this.DBObject是数据库成功打开后返回的对象,它是操作数据库的核心对象。数据库增删改查都是通过它实现。
    this.DBObject = e.target.result;

    //创建好数据库后,就需要创建储存数据的“表”,通过createObjectStore(storeName, option)创建,storeName是“表”的名称,option是“表”的配置项,
    例如配置“表”的主键{keyPath: ''}。下面代码创建了一个名为tipsStore的“表”,主键为ID
      this.DBObject.createObjectStore('tipsStore', { keyPath: 'ID' });
  }
  
2、数据库打开成功后,证明可以接受数据了。所以要在上面数据库打开成功的回调里初始化websocket。
    request.onsuccess = (e) => {
        //使用new WebSocket实例化一个socket对象
        const ws = new WebSocket('ws://xxxxxxxxx');
        
        //WebSocket成功打开
         ws.onopen = () => {};

       // WebSocket接收到后端传送过来的数据时触发
       ws.onmessage = (evt) => {
        //当接受到数据后,就立刻将数据写入到indexedDB保存,该add方法下面实现
        this.add(evt.data);
       };

      // websocket连接断开触发事件,可以在这个事件里重连websocket,或者做错误日志记录
      ws.onclose = () => {};
      

3、写入数据的方法
    add(data) {
      //通过transaction(storeName, option)方法创建一个可以操作indexedDB的事务,storeName是一个数组,
      表示该事务可以操作哪些“表”,option是该事务的权限,‘只读’或者“读写”等。。。
       const request = this.DBObject.transaction(['tipsStore'], 'readwrite');
       
       //然后用objectStore(storeName)方法选择一个“表”(下面代码对名为tipsStore的“表”写入数据),再通add()方法将数据写入到
       request.objectStore('tipsStore').add(data);

      //数据写入成功的回调
      request.onsuccess = (event) => {};

      request.onerror = (event) => {};
    }
    
4、到这里,接受数据和储存数据都已经实现。
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法引论

算法引论

[美]Udi Manber / 黄林鹏、谢瑾奎、陆首博、等 / 电子工业出版社 / 2005-9-1 / 35.00元

本书是国际算法大师乌迪·曼博(Udi Manber)博士撰写的一本享有盛誉的著作。全书共分12章:第1章到第4章为介绍性内容,涉及数学归纳法、算法分析、数据结构等内容;第5章提出了与归纳证明进行类比的算法设计思想;第6章到第9章分别给出了4个领域的算法,如序列和集合的算法、图算法、几何算法、代数和数值算法;第10章涉及归约,也是第11章的序幕,而后者涉及NP完全问题;第12章则介绍了并行算法;最后......一起来看看 《算法引论》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具