整理前端工做中的可複用代碼（一）：作一個整合存儲的插件

在前端平常開發工做中，常遇到代碼重複開發的問題，好比一個分頁，左滑動等常見功能。咱們的解決辦法多是此次寫一點，下次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();//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

此係列相關文章(同步更新)：

1. 整理前端工做中的可複用代碼（一）：作一個整合存儲的插件
2. 整理前端工做中的可複用代碼（二）：拓展spark-md5，支持計算網絡文件md5