整理js開發中的實用小工具（一）：做一個整合儲存的小工具

霧空發表於2019-01-01
JS

在開發工作中，常遇到程式碼重複開發的問題，比如一個分頁，左滑動等常見功能，而我們的解決辦法可能是這次寫一點，下次 copy 一點，如果不能解決問題，再改寫一點。若是沒有把可複用的程式碼抽離出來，做成一個通用的、可配置的小工具，私以為對技能的提升無益，所以在此立下個 flag，以後工作中遇到頻繁開發的功能，都要有效的抽離出來，做成一個小外掛、工具。

要解決的問題

在web前端開發中，經常會用到資料儲存，比較常用的有 sessionStorage、localStorage、cookie，本文提出的整合儲存，也是從這三個儲存物件出發。利用儲存可以實現資料多頁面共享、提升頁面渲染速度、快取資料/減輕伺服器壓力等好處，但這些儲存物件使用起來並不太方便，按照筆者的經歷，在使用 cookie 時，有時會使用 js-cookie 等操作 cookie 的外掛，使用 sessionStorage、localStorage，又擔心瀏覽器不支援，導致頁面報錯崩潰，不得不頻繁的去驗證瀏覽器是否支援這些儲存物件。

由此至少可以得出以下幾點問題：

  1. 直接使用js儲存物件是不夠簡便的；
  2. 如果程式碼不夠嚴謹，頁面有崩潰的風險；
  3. 缺乏一個通用的整合工具來提供呼叫；

如何解決問題

在處理以上問題時，前端知名的類庫 jquery 其實就是很好的典範，其中有不少思路都是可以借鑑的，譬如：

  1. 簡單易用的api;
  2. 通過傳遞物件批量運算元據、dom；
  3. 提供鏈式呼叫，有效地精簡程式碼；
  4. 可以驗證瀏覽器是否支援一些新特性，並有效地解決相容性問題；

通過以上幾點思路，筆者實現了一個小工具，下面介紹一些示例

相關引數

/*  type: 可選 值->
sessionStorage、localStorage、cookie之一，預設sessionStorage  success: 可選 設定成功後的回撥，注意要放在物件裡，下同  fail: 可選 設定失敗後的回撥    方法：    get 獲取值    set 設定值    remove 刪除值    isSupport 判斷是否支援sessionStorage/localStorage/cookie    setType 修改type*/var storage = new StorageUtil(type,{ 
success:function(){ 
 console.log('成功了');
 
  }, fail:function(){ 
 console.log('失敗了');
 
  }
  });
複製程式碼

環境檢測

注意：在相容性方面，工具並不會自動降級處理，如果需要，可以在回撥函式中做相關操作

new StorageUtil().isSupport();
//sessionStoragenew StorageUtil('localStorage').isSupport();
//localStoragenew StorageUtil('cookie').isSupport();
//cookie複製程式碼

增刪改查

設定cookie略有不同，可選設定時間

//sessionStoragevar storage = new StorageUtil();
storage.set('sessionStoragekey',1);
storage.get('sessionStoragekey');
//1console.log(sessionStorage.sessionStoragekey)//1//localStoragevar storage = new StorageUtil('localStorage');
storage.set('localStoragekey',1);
storage.get('localStoragekey');
//1console.log(localStorage.localStoragekey)//1//cookievar storage = new StorageUtil('cookie'), time = 5 * 60 * 60 * 1000;
 //5小時，預設2小時storage.set('cookiekey',1,time);
console.log(storage.get('cookiekey'));
//1複製程式碼

鏈式呼叫

由於get為取值操作，這裡的鏈式操作只能是set或remove

//set/removeconsole.log(new StorageUtil().set('key1',1).set('key2',2).remove('key1').get('key2'));
//2複製程式碼

直接儲存物件

無需手動轉換物件資料

//sessionStorage/localStorage/cookienew StorageUtil().set('obj',{'test':1
  }).get('obj')//{test: 1
  }new StorageUtil('localStorage').set('obj',{'test':1
  }).get('obj')//{test: 1
  }new StorageUtil('cookie').set('obj',{'test':1
  }).get('obj')//{test: 1
  }複製程式碼

批量操作

批量設定cookie時，time引數往前移一位

//批量getnew StorageUtil().get('key1,key2');
//批量set sessionStorage/localStoragenew StorageUtil().set({ke1:1,key2:2
  });
//批量set cookie time 可選var time = 5 * 60 * 60 * 1000;
new StorageUtil('cookie').set({ke1:1,key2:2
  },time);
//批量刪除 sessionStorage/localStorage/cookienew StorageUtil().remove('key1,key2');
複製程式碼

下面會介紹一些更為靈活的方式，在開發的過程中，筆者也感受到了js是一門很靈活的語言，如果使用好，程式碼也可以很有趣

變換type

只需一行程式碼，就可以玩轉三個儲存物件

new StorageUtil().set('key1',1).setType('localStorage').set('key2',2). .setType('cookie').set('key3',3)複製程式碼

無限鏈式

new StorageUtil().set('msg','你翩翩地路過，').get('msg',function(msg){ 
 console.log(msg);
 
  }).setType('localStorage').set('msg','以為不曾留下什麼，').get('msg',function(msg){ 
 console.log(msg);
 
  }).setType('cookie').set('msg','卻在我心裡有了思念，').get('msg',function(msg){ 
 console.log(msg);
 
  }).setType('sessionStorage').set('msg','若你還記得，').get('msg',function(msg){ 
 console.log(msg);
 
  }).setType('localStorage').set('msg','那個蟬鳴的夏天，').get('msg',function(msg){ 
 console.log(msg);
 
  }).setType('cookie').set('msg','有一個你，也有一個我。').get('msg',function(msg){ 
 console.log(msg);
 
  })複製程式碼

無限鏈式+批量

new StorageUtil().set({key3:3,key4:4
  }).get('key3,key4',function(key3,key4){ 
 console.log(key3,key4);
 
  }).remove('key3,key4');
複製程式碼

以上便是該工具的所有介紹，如果覺得有幫助，請給我的文章點個贊吧

github地址：js-utils

來源：https://juejin.im/post/5c2a748ae51d4541d8075c3a

相關文章