整理js开发中的实用小工具(一):做一个整合存储的小工具

栏目: Html5 · 发布时间: 5年前

内容简介:在开发工作中,常遇到代码重复开发的问题,比如一个分页,左滑动等常见功能,而我们的解决办法可能是这次写一点,下次 copy 一点,如果不能解决问题,再改写一点。若是没有把可复用的代码抽离出来,做成一个通用的、可配置的小工具,私以为对技能的提升无益,所以在此立下个 flag,以后工作中遇到频繁开发的功能,都要有效的抽离出来,做成一个小插件、工具。在web前端开发中,经常会用到数据存储,比较常用的有 sessionStorage、localStorage、cookie,本文提出的整合存储,也是从这三个存储对象出发

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS3实用指南

CSS3实用指南

吉伦瓦特 / 屈超、周志超 / 人民邮电出版社 / 2012-3 / 49.00元

CSS3为Web的视觉样式语言注入了强大的新功能,让设计人员更加轻松自如地设计优美而引人入胜的内容。借助CSS3,不使用图片就可以创建半透明背 景、渐变、阴影等夺人眼球的视觉效果;还可以使用漂亮、独特、非Web安全的字体显示文本;不用Flash就可以创建动画;不用JavaScript就可 以定制适应用户的设备和屏幕尺寸的设计。 本书通过一系列实用且新颖的范例,向读者展示如何实现以上功能和更多......一起来看看 《CSS3实用指南》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具