(實戰)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) => {};
    }
    
四、到這裏,接受數據和儲存數據都已經實現。
複製代碼
相關文章
相關標籤/搜索