整理前端工作中的可复用代码（一）：做一个整合存储的插件-白红宇

在前端日常开发工作中，常遇到代码重复开发的问题，比如一个分页，左滑动等常见功能。我们的解决办法可能是这次写一点，下次copy一点，如果不能解决问题，再改写一点。若没有把可复用的代码抽离出来，做成通用的、可配置的，私以为对技能的提升无益。所以在此立下个flag，以后工作中遇到可复用的代码，要有效地抽离出来，做成一个小插件、工具。

要解决的问题

在web前端开发中，经常会用到数据存储，比较常用的有sessionStorage、localStorage、cookie，本文提出的整合存储，也是从这三个存储对象出发。

善用存储可以实现数据多页面共享、提升页面渲染速度、缓存数据/减轻服务器压力等好处。但这些存储对象使用起来并不太方便，按照笔者的经历，在使用cookie时，有时会用到js-cookie等操作cookie的插件，使用sessionStorage、localStorage，又担心浏览器不支持，导致页面报错崩溃，不得不频繁地去验证浏览器是否支持这些存储对象。

由此至少得出以下几点问题：

直接使用js存储对象是不够简便的；

如果代码不够严谨，页面有崩溃的风险；

缺乏一个通用的整合工具来提供调用；

如何解决问题

在处理以上问题时，前端知名的库jquery就是很好的典范，其中有不少思路可以借鉴，譬如：

简单易用的api;

通过传递对象批量操作数据、dom；

提供链式调用，有效地精简代码；

可以验证浏览器是否支持一些新特性，并解决兼容性问题；

通过以上几点思路，笔者实现了一个小工具，下面介绍一些示例

环境检测

注意：在兼容性方面，工具并不会自动降级处理，如果需要，可以在回调函数中做相关操作

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地址：

此系列相关文章(同步更新)：