在開發工作中，常遇到程式碼重複開發的問題，比如一個分頁，左滑動等常見功能，而我們的解決辦法可能是這次寫一點，下次 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
複製程式碼

批量操作

批量設定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().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地址：js-utils