在开发工作中，常遇到代码重复开发的问题，比如一个分页，左滑动等常见功能，而我们的解决办法可能是这次写一点，下次 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
复制代码批量操作
批量设置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