整理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


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

查看所有标签

猜你喜欢:

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

Artificial Intelligence

Artificial Intelligence

Stuart Russell、Peter Norvig / Pearson / 2009-12-11 / USD 195.00

The long-anticipated revision of this #1 selling book offers the most comprehensive, state of the art introduction to the theory and practice of artificial intelligence for modern applications. Intell......一起来看看 《Artificial Intelligence》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具