常用的前端JavaScript方法封装

1、输入一个值,返回其数据类型**

functiontype(para){returnObject.prototype.toString.call(para)}

2、数组去重

functionunique1(arr){return[...newSet(arr)]}functionunique2(arr){varobj={};returnarr.filter(ele=>{if(!obj[ele]){obj[ele]=true;returntrue;}})}functionunique3(arr){varresult=[];arr.forEach(ele=>{if(result.indexOf(ele)==-1){result.push(ele)}})returnresult;}

3、字符串去重

String.prototype.unique=function(){varobj={},str='',len=this.length;for(vari=0;i<len;i++){if(!obj[this[i]]){str+=this[i];obj[this[i]]=true;}}returnstr;}

//去除连续的字符串

functionuniq(str){returnstr.replace(/(\w)\1+/g,'$1')}

去除字符串空格

consttrim=function(str,type){// 去除空格, type:  1-所有空格  2-前后空格  3-前空格 4-后空格type=type||1switch(type){case1:returnstr.replace(/\s+/g,'')case2:returnstr.replace(/(^\s*)|(\s*$)/g,'')case3:returnstr.replace(/(^\s*)/g,'')case4:returnstr.replace(/(\s*$)/g,'')default:returnstr}}

4、深拷贝 浅拷贝

//深克隆(深克隆不考虑函数)functiondeepClone(obj,result){varresult=result||{};for(varpropinobj){if(obj.hasOwnProperty(prop)){if(typeofobj[prop]=='object'&&obj[prop]!==null){// 引用值(obj/array)且不为nullif(Object.prototype.toString.call(obj[prop])=='[object Object]'){// 对象result[prop]={};}else{// 数组result[prop]=[];}deepClone(obj[prop],result[prop])}else{// 原始值或funcresult[prop]=obj[prop]}}}returnresult;}// 深浅克隆是针对引用值functiondeepClone(target){if(typeof(target)!=='object'){returntarget;}varresult;if(Object.prototype.toString.call(target)=='[object Array]'){// 数组result=[]}else{// 对象result={};}for(varpropintarget){if(target.hasOwnProperty(prop)){result[prop]=deepClone(target[prop])}}returnresult;}// 无法复制函数varo1=jsON.parse(jsON.stringify(obj1));

5、reverse底层原理和扩展

// 改变原数组Array.prototype.myReverse=function(){varlen=this.length;for(vari=0;i<len;i++){vartemp=this[i];this[i]=this[len-1-i];this[len-1-i]=temp;}returnthis;}

6、圣杯模式的继承

functioninherit(Target,Origin){functionF(){};F.prototype=Origin.prototype;Target.prototype=newF();Target.prototype.constructor=Target;// 最终的原型指向Target.prop.uber=Origin.prototype;}

7、找出字符串中第一次只出现一次的字母

String.prototype.firstAppear=function(){varobj={},len=this.length;for(vari=0;i<len;i++){if(obj[this[i]]){obj[this[i]]++;}else{obj[this[i]]=1;}}for(varpropinobj){if(obj[prop]==1){returnprop;}}}

8、找元素的第n级父元素

functionparents(ele,n){while(ele&&n){ele=ele.parentElement?ele.parentElement:ele.parentNode;n--;}returnele;}

9、 返回元素的第n个兄弟节点

functionretSibling(e,n){while(e&&n){if(n>0){if(e.nextElementSibling){e=e.nextElementSibling;}else{for(e=e.nextSibling;e&&e.nodeType!==1;e=e.nextSibling);}n--;}else{if(e.previousElementSibling){e=e.previousElementSibling;}else{for(e=e.previousElementSibling;e&&e.nodeType!==1;e=e.previousElementSibling);}n++;}}returne;}

10、封装mychildren,解决浏览器的兼容问题

functionmyChildren(e){varchildren=e.childNodes,arr=[],len=children.length;for(vari=0;i<len;i++){if(children[i].nodeType===1){arr.push(children[i])}}returnarr;}

11、判断元素有没有子元素

functionhasChildren(e){varchildren=e.childNodes,len=children.length;for(vari=0;i<len;i++){if(children[i].nodeType===1){returntrue;}}returnfalse;}

12、我一个元素插入到另一个元素的后面

Element.prototype.insertAfter=function(target,elen){varnextElen=elen.nextElenmentSibling;if(nextElen==null){this.appendChild(target);}else{this.insertBefore(target,nextElen);}}

13、返回当前的时间(年月日时分秒)

functiongetDateTime(){vardate=newDate(),year=date.getFullYear(),month=date.getMonth()+1,day=date.getDate(),hour=date.getHours()+1,minute=date.getMinutes(),second=date.getSeconds();month=checkTime(month);day=checkTime(day);hour=checkTime(hour);minute=checkTime(minute);second=checkTime(second);functioncheckTime(i){if(i<10){i="0"+i;}returni;}return""+year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒"}

14、获得滚动条的滚动距离

functiongetScrollOffset(){if(window.pageXOffset){return{x:window.pageXOffset,y:window.pageYOffset}}else{return{x:document.body.scrollLeft+document.documentElement.scrollLeft,y:document.body.scrollTop+document.documentElement.scrollTop}}}

浏览器操作

(1)滚动到页面顶部

exportconstscrollToTop=()=>{constheight=document.documentElement.scrollTop||document.body.scrollTop;if(height>0){window.requestAnimationFrame(scrollToTop);window.scrollTo(0,height-height/8);}}

(2)滚动到页面底部

exportconstscrollToBottom=()=>{window.scrollTo(0,document.documentElement.clientHeight);}

(3)滚动到指定元素区域

exportconstsmoothScroll=(element)=>{document.querySelector(element).scrollIntoView({behavior:'smooth'});};

(4)获取可视窗口高度

exportconstgetClientHeight=()=>{letclientHeight=0;if(document.body.clientHeight&&document.documentElement.clientHeight){clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;}else{clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;}returnclientHeight;}

(5)获取可视窗口宽度

exportconstgetPageViewWidth=()=>{return(document.compatMode=="BackCompat"?document.body:document.documentElement).clientWidth;}

(6)打开浏览器全屏

exportconsttoFullScreen=()=>{letelement=document.body;if(element.requestFullscreen){element.requestFullscreen()}elseif(element.mozRequestFullScreen){element.mozRequestFullScreen()}elseif(element.msRequestFullscreen){element.msRequestFullscreen()}elseif(element.webkitRequestFullscreen){element.webkitRequestFullScreen()}}

(7)退出浏览器全屏

exportconstexitFullscreen=()=>{if(document.exitFullscreen){document.exitFullscreen()}elseif(document.msExitFullscreen){document.msExitFullscreen()}elseif(document.mozCancelFullScreen){document.mozCancelFullScreen()}elseif(document.webkitExitFullscreen){document.webkitExitFullscreen()}}

15、获得视口的尺寸

functiongetViewportOffset(){if(window.innerWidth){return{w:window.innerWidth,h:window.innerHeight}}else{// ie8及其以下if(document.compatMode==="BackCompat"){// 怪异模式return{w:document.body.clientWidth,h:document.body.clientHeight}}else{// 标准模式return{w:document.documentElement.clientWidth,h:document.documentElement.clientHeight}}}}

16、获取任一元素的任意属性

functiongetStyle(elem,prop){returnwindow.getComputedStyle?window.getComputedStyle(elem,null)[prop]:elem.currentStyle[prop]}

17、绑定事件的兼容代码

functionaddEvent(elem,type,handle){if(elem.addEventListener){//非ie和非ie9elem.addEventListener(type,handle,false);}elseif(elem.attachEvent){//ie6到ie8elem.attachEvent('on'+type,function(){handle.call(elem);})}else{elem['on'+type]=handle;}}

18、解绑事件

functionremoveEvent(elem,type,handle){if(elem.removeEventListener){//非ie和非ie9elem.removeEventListener(type,handle,false);}elseif(elem.detachEvent){//ie6到ie8elem.detachEvent('on'+type,handle);}else{elem['on'+type]=null;}}

19、取消冒泡的兼容代码

functionstopBubble(e){if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}}

20、检验字符串是否是回文

functionisPalina(str){if(Object.prototype.toString.call(str)!=='[object String]'){returnfalse;}varlen=str.length;for(vari=0;i<len/2;i++){if(str[i]!=str[len-1-i]){returnfalse;}}returntrue;}

21、检验字符串是否是回文

functionisPalindrome(str){str=str.replace(/\W/g,'').toLowerCase();console.log(str)return(str==str.split('').reverse().join(''))}

22、兼容getElementsByClassName方法

Element.prototype.getElementsByClassName=Document.prototype.getElementsByClassName=function(_className){varallDomArray=document.getElementsByTagName('*');varlastDomArray=[];functiontrimSpace(strClass){varreg=/\s+/g;returnstrClass.replace(reg,' ').trim()}for(vari=0;i<allDomArray.length;i++){varclassArray=trimSpace(allDomArray[i].className).split(' ');for(varj=0;j<classArray.length;j++){if(classArray[j]==_className){lastDomArray.push(allDomArray[i]);break;}}}returnlastDomArray;}

23、运动函数'

functionanimate(obj,json,callback){clearInterval(obj.timer);varspeed,current;obj.timer=setInterval(function(){varlock=true;for(varpropinjson){if(prop=='opacity'){current=parseFloat(window.getComputedStyle(obj,null)[prop])*100;}else{current=parseInt(window.getComputedStyle(obj,null)[prop]);}speed=(json[prop]-current)/7;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(prop=='opacity'){obj.style[prop]=(current+speed)/100;}else{obj.style[prop]=current+speed+'px';}if(current!=json[prop]){lock=false;}}if(lock){clearInterval(obj.timer);typeofcallback=='function'?callback():'';}},30)}

24、弹性运动

functionElasticMovement(obj,target){clearInterval(obj.timer);variSpeed=40,a,u=0.8;obj.timer=setInterval(function(){a=(target-obj.offsetLeft)/8;iSpeed=iSpeed+a;iSpeed=iSpeed*u;if(Math.abs(iSpeed)<=1&&Math.abs(a)<=1){console.log('over')clearInterval(obj.timer);obj.style.left=target+'px';}else{obj.style.left=obj.offsetLeft+iSpeed+'px';}},30);}

25、封装自己的forEach方法

Array.prototype.myForEach=function(func,obj){varlen=this.length;var_this=arguments[1]?arguments[1]:window;// var _this=arguments[1]||window;for(vari=0;i<len;i++){func.call(_this,this[i],i,this)}}

26、封装自己的filter方法

Array.prototype.myFilter=function(func,obj){varlen=this.length;vararr=[];var_this=arguments[1]||window;for(vari=0;i<len;i++){func.call(_this,this[i],i,this)&&arr.push(this[i]);}returnarr;}

27、数组map方法

Array.prototype.myMap=function(func){vararr=[];varlen=this.length;var_this=arguments[1]||window;for(vari=0;i<len;i++){arr.push(func.call(_this,this[i],i,this));}returnarr;}

28、数组every方法

Array.prototype.myEvery=function(func){varflag=true;varlen=this.length;var_this=arguments[1]||window;for(vari=0;i<len;i++){if(func.apply(_this,[this[i],i,this])==false){flag=false;break;}}returnflag;}

29、数组reduce方法

Array.prototype.myReduce=function(func,initialValue){varlen=this.length,nextValue,i;if(!initialValue){// 没有传第二个参数nextValue=this[0];i=1;}else{// 传了第二个参数nextValue=initialValue;i=0;}for(;i<len;i++){nextValue=func(nextValue,this[i],i,this);}returnnextValue;}

30、获取url中的参数

functiongetWindonHref(){varsHref=window.location.href;varargs=sHref.split('?');if(args[0]===sHref){return'';}varhrefarr=args[1].split('#')[0].split('&');varobj={};for(vari=0;i<hrefarr.length;i++){hrefarr[i]=hrefarr[i].split('=');obj[hrefarr[i][0]]=hrefarr[i][1];}returnobj;}

constgetParameters=(URL)=>{URL=JSON.parse('{"'+decodeURI(URL.split("?")[1]).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')+'"}');returnJSON.stringify(URL);};getParameters(window.location);// Result: { search : "easy", page : 3 }

或者更为简单的:Object.fromEntries(newURLSearchParams(window.location.search))// Result: { search : "easy", page : 3 }

键值对拼接成URL参数

exportconstparams2Url=(obj)=>{letparams=[]for(letkeyinobj){params.push(`${key}=${obj[key]}`);}returnencodeURIComponent(params.join('&'))}

31、数组排序

// 快排 [left] + min + [right]functionquickArr(arr){if(arr.length<=1){returnarr;}varleft=[],right=[];varpIndex=Math.floor(arr.length/2);varp=arr.splice(pIndex,1)[0];for(vari=0;i<arr.length;i++){if(arr[i]<=p){left.push(arr[i]);}else{right.push(arr[i]);}}// 递归returnquickArr(left).concat([p],quickArr(right));}// 冒泡functionbubbleSort(arr){for(vari=0;i<arr.length-1;i++){for(varj=i+1;j<arr.length;j++){if(arr[i]>arr[j]){vartemp=arr[i];arr[i]=arr[j];arr[j]=temp;}}}returnarr;}functionbubbleSort(arr){varlen=arr.length;for(vari=0;i<len-1;i++){for(varj=0;j<len-1-i;j++){if(arr[j]>arr[j+1]){vartemp=arr[j];arr[j]=arr[j+1];arr[j+1]=temp;}}}returnarr;}

32、遍历Dom树

// 给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)// 对于每个访问的元素,函数讲元素传递给提供的回调函数functiontraverse(element,callback){callback(element);varlist=element.children;for(vari=0;i<list.length;i++){traverse(list[i],callback);}}

33、原生js封装ajax

functionajax(method,url,callback,data,flag){varxhr;flag=flag||true;method=method.toUpperCase();if(window.XMLHttpRequest){xhr=newXMLHttpRequest();}else{xhr=newActiveXObject('Microsoft.XMLHttp');}xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){console.log(2)callback(xhr.responseText);}}if(method=='GET'){vardate=newDate(),timer=date.getTime();xhr.open('GET',url+'?'+data+'&timer'+timer,flag);xhr.send()}elseif(method=='POST'){xhr.open('POST',url,flag);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(data);}}

34、异步加载script

functionloadScript(url,callback){varoscript=document.createElement('script');if(oscript.readyState){// ie8及以下版本oscript.onreadystatechange=function(){if(oscript.readyState==='complete'||oscript.readyState==='loaded'){callback();}}}else{oscript.onload=function(){callback()};}oscript.src=url;document.body.appendChild(oscript);}

35、cookie管理

varcookie={set:function(name,value,time){document.cookie=name+'='+value+'; max-age='+time;returnthis;},remove:function(name){returnthis.setCookie(name,'',-1);},get:function(name,callback){varallCookieArr=document.cookie.split('; ');for(vari=0;i<allCookieArr.length;i++){varitemCookieArr=allCookieArr[i].split('=');if(itemCookieArr[0]===name){returnitemCookieArr[1]}}returnundefined;}}

36、实现bind()方法

Function.prototype.myBind=function(target){vartarget=target||window;var_args1=[].slice.call(arguments,1);varself=this;vartemp=function(){};varF=function(){var_args2=[].slice.call(arguments,0);varparasArr=_args1.concat(_args2);returnself.apply(thisinstanceoftemp?this:target,parasArr)}temp.prototype=self.prototype;F.prototype=newtemp();returnF;}

37、实现call()方法

Function.prototype.myCall=function(){varctx=arguments[0]||window;ctx.fn=this;varargs=[];for(vari=1;i<arguments.length;i++){args.push(arguments[i])}varresult=ctx.fn(...args);deletectx.fn;returnresult;}

38、实现apply()方法

Function.prototype.myApply=function(){varctx=arguments[0]||window;ctx.fn=this;if(!arguments[1]){varresult=ctx.fn();deletectx.fn;returnresult;}varresult=ctx.fn(...arguments[1]);deletectx.fn;returnresult;}

39、防抖

functiondebounce(handle,delay){vartimer=null;returnfunction(){var_self=this,_args=arguments;clearTimeout(timer);timer=setTimeout(function(){handle.apply(_self,_args)},delay)}}

40、节流

functionthrottle(handler,wait){varlastTime=0;returnfunction(e){varnowTime=newDate().getTime();if(nowTime-lastTime>wait){handler.apply(this,arguments);lastTime=nowTime;}}}

41、requestAnimFrame兼容性方法

window.requestAnimFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();

42、cancelAnimFrame兼容性方法

window.cancelAnimFrame=(function(){returnwindow.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(id){window.clearTimeout(id);};})();

43、jsonp底层方法

functionjsonp(url,callback){varoscript=document.createElement('script');if(oscript.readyState){// ie8及以下版本oscript.onreadystatechange=function(){if(oscript.readyState==='complete'||oscript.readyState==='loaded'){callback();}}}else{oscript.onload=function(){callback()};}oscript.src=url;document.body.appendChild(oscript);}

44、获取url上的参数

functiongetUrlParam(sUrl,sKey){varresult={};sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g,function(ele,key,val){if(!result[key]){result[key]=val;}else{vartemp=result[key];result[key]=[].concat(temp,val);}})if(!sKey){returnresult;}else{returnresult[sKey]||'';}}

45、格式化时间

functionformatDate(t,str){varobj={yyyy:t.getFullYear(),yy:(""+t.getFullYear()).slice(-2),M:t.getMonth()+1,MM:("0"+(t.getMonth()+1)).slice(-2),d:t.getDate(),dd:("0"+t.getDate()).slice(-2),H:t.getHours(),HH:("0"+t.getHours()).slice(-2),h:t.getHours()%12,hh:("0"+t.getHours()%12).slice(-2),m:t.getMinutes(),mm:("0"+t.getMinutes()).slice(-2),s:t.getSeconds(),ss:("0"+t.getSeconds()).slice(-2),w:['日','一','二','三','四','五','六'][t.getDay()]};returnstr.replace(/([a-z]+)/ig,function($1){returnobj[$1]});}

46、验证邮箱的正则表达式

functionisAvailableEmail(sEmail){varreg=/^([\w+\.])+@\w+([.]\w+)+$/returnreg.test(sEmail)}

47、函数柯里化

//是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术

functioncurryIt(fn){varlength=fn.length,args=[];varresult=function(arg){args.push(arg);length--;if(length<=0){returnfn.apply(this,args);}else{returnresult;}}returnresult;}

48、大数相加

functionsumBigNumber(a,b){varres='',//结果temp=0;//按位加的结果及进位a=a.split('');b=b.split('');while(a.length||b.length||temp){//~~按位非 1.类型转换,转换成数字 2.~~undefined==0 temp+=~~a.pop()+~~b.pop();res=(temp%10)+res;temp=temp>9;}returnres.replace(/^0+/,'');}

49、单例模式

functiongetSingle(func){varresult;returnfunction(){if(!result){result=newfunc(arguments);}returnresult;}}

50、设备判断:android、ios、web

constisDevice=function(){// 判断是android还是ios还是webvarua=navigator.userAgent.toLowerCase()if(ua.match(/iPhone\sOS/i)==='iphone os'||ua.match(/iPad/i)==='ipad'){// iosreturn'iOS'}if(ua.match(/Android/i)==='android'){return'Android'}return'Web'}

判断是否为微信

constisWx=function(){// 判断是否为微信varua=window.navigator.userAgent.toLowerCase()if(ua.match(/MicroMessenger/i)==='micromessenger'){returntrue}returnfalse}

52.是否为PC端

constisPC=function(){// 是否为PC端letuserAgentInfo=navigator.userAgentletAgents=['Android','iPhone','SymbianOS','Windows Phone','iPad','iPod']letflag=truefor(letv=0;v<Agents.length;v++){if(userAgentInfo.indexOf(Agents[v])>0){flag=falsebreak}}returnflag}

53.判断图片加载完成

constimgLoadAll=function(arr,callback){// 图片加载letarrImg=[]for(leti=0;i<arr.length;i++){letimg=newImage()img.src=arr[i]img.onload=function(){arrImg.push(this)if(arrImg.length==arr.length){callback&&callback()}}}}

54.音频加载完成操作

constloadAudio=function(src,callback){// 音频加载varaudio=newAudio(src)audio.onloadedmetadata=callback  audio.src=src}

55,图片地址转base64

constgetBase64=function(img){//传入图片路径,返回base64,使用getBase64(url).then(function(base64){},function(err){}); letgetBase64Image=function(img,width,height){//width、height调用时传入具体像素值,控制大小,不传则默认图像大小letcanvas=document.createElement("canvas");canvas.width=width?width:img.width;canvas.height=height?height:img.height;letctx=canvas.getContext("2d");ctx.drawImage(img,0,0,canvas.width,canvas.height);letdataURL=canvas.toDataURL();returndataURL;}letimage=newImage();image.crossOrigin='';image.src=img;letdeferred=$.Deferred();if(img){image.onload=function(){deferred.resolve(getBase64Image(image));}returndeferred.promise();}}

56.H5软键盘缩回、弹起回调

consth5Resize=function(downCb,upCb){//当软件键盘弹起会改变当前 window.innerHeight,监听这个值变化 [downCb 当软键盘弹起后,缩回的回调,upCb 当软键盘弹起的回调]varclientHeight=window.innerHeight;downCb=typeofdownCb==='function'?downCb:function(){}upCb=typeofupCb==='function'?upCb:function(){}window.addEventListener('resize',()=>{varheight=window.innerHeight;if(height===clientHeight){downCb();}if(height<clientHeight){upCb();}});}

计算2个日期之间相差多少天

constdayDif=(date1,date2)=>Math.ceil(Math.abs(date1.getTime()-date2.getTime())/86400000)dayDif(newDate("2020-10-21"),newDate("2021-10-22"))// Result: 366

生成随机十六进制颜色

//可以使用 Math.random 和 padEnd 属性生成随机的十六进制颜色。constrandomHex=()=>`#${Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,"0")}`;console.log(randomHex());// Result: #92b008

手机号中间四位变成*

exportconsttelFormat=(tel)=>{tel=String(tel);returntel.substr(0,3)+"****"+tel.substr(7);}

数字转化为大写金额

exportconstdigitUppercase=(n)=>{constfraction=['角','分'];constdigit=['零','壹','贰','叁','肆','伍','陆','柒','捌','玖'];constunit=[['元','万','亿'],['','拾','佰','仟']];n=Math.abs(n);lets='';for(leti=0;i<fraction.length;i++){s+=(digit[Math.floor(n*10*Math.pow(10,i))%10]+fraction[i]).replace(/零./,'');}s=s||'整';n=Math.floor(n);for(leti=0;i<unit[0].length&&n>0;i++){letp='';for(letj=0;j<unit[1].length&&n>0;j++){p=digit[n%10]+unit[1][j]+p;n=Math.floor(n/10);}s=p.replace(/(零.)*零$/,'').replace(/^$/,'零')+unit[0][i]+s;}returns.replace(/(零.)*零元/,'元').replace(/(零.)+/g,'零').replace(/^整$/,'零元整');};

数字转化为中文数字

exportconstintToChinese=(value)=>{conststr=String(value);constlen=str.length-1;constidxs=['','十','百','千','万','十','百','千','亿','十','百','千','万','十','百','千','亿'];constnum=['零','一','二','三','四','五','六','七','八','九'];returnstr.replace(/([1-9]|0+)/g,($,$1,idx,full)=>{letpos=0;if($1[0]!=='0'){pos=len-idx;if(idx==0&&$1[0]==1&&idxs[len-idx]=='十'){returnidxs[len-idx];}returnnum[$1[0]]+idxs[len-idx];}else{letleft=len-idx;letright=len-idx+$1.length;if(Math.floor(right/4)-Math.floor(left/4)>0){pos=left-left%4;}if(pos){returnidxs[pos]+num[$1[0]];}elseif(idx+$1.length>=len){return'';}else{returnnum[$1[0]]}}});}

(1)存储loalStorage

exportconstloalStorageSet=(key,value)=>{if(!key)return;if(typeofvalue!=='string'){value=JSON.stringify(value);}window.localStorage.setItem(key,value);};

(2)获取localStorage

exportconstloalStorageGet=(key)=>{if(!key)return;returnwindow.localStorage.getItem(key);};

(3)删除localStorage

exportconstloalStorageRemove=(key)=>{if(!key)return;window.localStorage.removeItem(key);};

(4)存储sessionStorage

exportconstsessionStorageSet=(key,value)=>{if(!key)return;if(typeofvalue!=='string'){value=JSON.stringify(value);}window.sessionStorage.setItem(key,value)};

(5)获取sessionStorage

exportconstsessionStorageGet=(key)=>{if(!key)return;returnwindow.sessionStorage.getItem(key)};

(6)删除sessionStorage

exportconstsessionStorageRemove=(key)=>{if(!key)return;window.sessionStorage.removeItem(key)};

操作cookie

(1)设置cookie

exportconstsetCookie=(key,value,expire)=>{constd=newDate();d.setDate(d.getDate()+expire);document.cookie=`${key}=${value};expires=${d.toUTCString()}`};

(2)读取cookie

exportconstgetCookie=(key)=>{constcookieStr=unescape(document.cookie);constarr=cookieStr.split('; ');letcookieValue='';for(leti=0;i<arr.length;i++){consttemp=arr[i].split('=');if(temp[0]===key){cookieValue=temp[1];break}}returncookieValue};

(3)删除cookie

exportconstdelCookie=(key)=>{document.cookie=`${encodeURIComponent(key)}=;expires=${newDate()}`};

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容