在前端日常開發工作中，常遇到代碼重複開發的問題，比如一個分頁，左滑動等常見功能。我們的解決辦法可能是這次寫一點，下次copy一點，如果不能解決問題，再改寫一點。若沒有把可複用的代碼抽離出來，做成通用的、可配置的，私以爲對技能的提升無益。所以在此立下個flag，以後工作中遇到可複用的代碼，要有效地抽離出來，做成一個小插件、工具。
要解決的問題
在web前端開發中，經常會用到數據存儲，比較常用的有sessionStorage、localStorage、cookie，本文提出的整合存儲，也是從這三個存儲對象出發。
善用存儲可以實現數據多頁面共享、提升頁面渲染速度、緩存數據/減輕服務器壓力等好處。但這些存儲對象使用起來並不太方便，按照筆者的經歷，在使用cookie時，有時會用到js-cookie等操作cookie的插件，使用sessionStorage、localStorage，又擔心瀏覽器不支持，導致頁面報錯崩潰，不得不頻繁地去驗證瀏覽器是否支持這些存儲對象。
由此至少得出以下幾點問題：
- 直接使用js存儲對象是不夠簡便的；
- 如果代碼不夠嚴謹，頁面有崩潰的風險；
- 缺乏一個通用的整合工具來提供調用；
如何解決問題
在處理以上問題時，前端知名的庫jquery就是很好的典範，其中有不少思路可以借鑑，譬如：
- 簡單易用的api;
- 通過傳遞對象批量操作數據、dom；
- 提供鏈式調用，有效地精簡代碼；
- 可以驗證瀏覽器是否支持一些新特性，並解決兼容性問題；
通過以上幾點思路，筆者實現了一個小工具，下面介紹一些示例
相關參數
/*
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();//sessionStorage
new StorageUtil('localStorage').isSupport();//localStorage
new StorageUtil('cookie').isSupport();//cookie
增刪改查
設置cookie略有不同，可選設置時間
//sessionStorage
var storage = new StorageUtil();
storage.set('sessionStoragekey',1);
storage.get('sessionStoragekey');//1
console.log(sessionStorage.sessionStoragekey)//1
//localStorage
var storage = new StorageUtil('localStorage');
storage.set('localStoragekey',1);
storage.get('localStoragekey');//1
console.log(localStorage.localStoragekey)//1
//cookie
var 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/remove
console.log(new StorageUtil().set('key1',1).set('key2',2).remove('key1').get('key2'));//2
直接存儲對象
無需手動轉換對象數據
//sessionStorage/localStorage/cookie
new 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參數往前移一位
//批量get
new StorageUtil().get('key1,key2');
//批量set sessionStorage/localStorage
new 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/cookie
new 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地址：storage-util
此係列相關文章(同步更新)：