（实战）indexedDB + webSocket实现数据持久化保存数据

1、前言

前端为何要实现数据持久化？（也就是保存数据到浏览器）。不少时候前端都是从后端接口获取数据，离开了网络，咱们就没有办法和后台通信，也就没办法拿到数据组装页面。为了解决这种尴尬的状况，将数据保存在浏览器，就算没有网络咱们也能从浏览器拿到数据。
复制代码

2、实现数据持久化方法

前端实现数据持久化的方法有很多，例如localstorage，sessionstorage，离线缓存（application cache），IndexedDB，Web SQL等等。
复制代码

3、项目需求

最近项目须要实现一个消息推送功能，需求是：
    前端和后端持续保持通信链接，后台接收到紧急的消息就将其推送给前端。但这些消息后台不存数据库，因此只能由前端保存。

分析：
    一、传统的http请求只能从前端发起，后台响应返回消息。后台不能主动推送消息给前端。因此http不适合项目需求，只能经过长链接websocket实现。
    二、前端保存数据的话，因为推送的消息可能会有不少，localstorage，sessionstorage等只能保存几M的数据，因此不适合。
    最后决定用[indexedDB](http://www.tfan.org/using-indexeddb/)实现，它的好处是易操做，有通俗易懂的api，而且能够保存大量数据。
复制代码

4、实现过程

好了，不说废话，直接开始打码。
一、打开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' });
  }
  
二、数据库打开成功后，证实能够接受数据了。因此要在上面数据库打开成功的回调里初始化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 = () => {};
      

三、写入数据的方法
    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) => {};
    }
    
四、到这里，接受数据和储存数据都已经实现。
复制代码