js cookie创建读取删除函数封装
一、总结
都是为了方便操作，这样弄了很方便
1、创建cookie的函数封装的作用：方便设置过期时间expire，方便设置键和值
2、查询cookie的数据封装的作用：document.cookie 获取的cookie是这样的：name1=aaa; name2=bbb; name3=ccc; 所以需要用split函数分割，先用:分割，然后用=等号分割
3、删除cookie的函数封装的作用：设置过期时间是位过去时间
二、js cookie创建读取删除函数封装
封装cookie创建/读取/删除的函数
- 创建cookie数据的函数封装
- 读取cookie数据的函数封装
split() 方法用于把一个字符串分割成字符串数组。
- 删除cookie的函数封装
三、代码
4-4 创建
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>课堂演示</title> 6 </head> 7 <body> 8 <script> 9 /* 10 //普通方法创建cookie，如果多条的话比较繁琐 11 document.cookie='name=jiyanpeng'; 12 document.cookie='qq=365966179'; 13 document.cookie='email=365966179@qq.com'; 14 //封装创建cookie的函数1 15 function setCookie(key,value,expires){ 16 var ddate=new Date(); 17 ddate.setDate(ddate.getDate()+expires) 18 document.cookie=key+'='+value+';expires='+ddate; 19 alert(document.cookie) 20 } 21 setCookie('name1','jiyanpeng1',10); 22 setCookie('name3','jiyanpeng3') 23 */ 24 //封装创建cookie的函数2 25 function setCookie(key,value,expires){ 26 document.cookie=key+'='+value+';expires='+ddate(expires); 27 } 28 29 function ddate(expires){ 30 var ddate=new Date() 31 ddate.setDate(ddate.getDate()+expires) 32 return ddate 33 } 34 setCookie('name4','jiyanpeng4',30); 35 //alert(ddate(7)) 36 </script> 37 </body> 38 </html>
4-5 查询
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>课堂演示</title> 6 </head> 7 <body> 8 <script> 9 /* 10 //封装创建cookie的函数2 11 function setCookie(key,value,expires){ 12 document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires); //1、encodeURIComponent对中文进行编码 13 } 14 15 function ddate(expires){ 16 var ddate=new Date() 17 ddate.setDate(ddate.getDate()+expires) 18 return ddate 19 } 20 21 setCookie('name','吉延鹏') 22 setCookie('qq','365966179') 23 setCookie('email','365966179@qq.com') 24 25 //alert(document.cookie) 26 27 //split() 方法用于把一个字符串分割成字符串数组。 28 var str='name1=aaa;name2=bbb;name3=ccc;'; 29 var arrStr=str.split(';') 30 //alert(arrStr); 31 //alert(arrStr[0]); //name1=aaa 32 var arr=arrStr[0].split('=') 33 //alert(arr[0]+' '+arr[1]) 34 35 */ 36 37 38 //读取cookie 39 function getCookie(name){ 40 var arrStr=document.cookie.split(';'); 41 //alert(arrStr) 42 for(var i=0;i<arrStr.length;i++){ 43 var arr=arrStr[i].split('=') 44 //alert(arr[0]+' '+arr[1]) 45 if(arr[0]==name){return arr[1] } 46 } 47 return '' 48 } 49 50 alert(getCookie('email')) 51 52 </script> 53 </body> 54 </html>
4-6 删除
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>课堂演示</title> 6 </head> 7 <body> 8 <script> 9 //封装创建cookie的函数2 10 function setCookie(key,value,expires){ 11 document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires); 12 } 13 14 function ddate(expires){ 15 var ddate=new Date() 16 ddate.setDate(ddate.getDate()+expires) 17 return ddate 18 } 19 20 setCookie('name','吉延鹏') 21 setCookie('qq','365966179') 22 setCookie('email','365966179@qq.com') 23 //读取cookie 24 function getCookie(name){ 25 var arrStr=document.cookie.split('; '); 26 //alert(arrStr) 27 for(var i=0;i<arrStr.length;i++){ 28 var arr=arrStr[i].split('=') 29 //alert(arr[0]+' '+arr[1]) 30 if(arr[0]==name){return decodeURIComponent(arr[1]) } //2、decodeURIComponent解码 31 } 32 return '' 33 } 34 35 function setCookie(key,value,expires){ 36 var ddate=new Date(); 37 ddate.setDate(ddate.getDate()+expires) 38 document.cookie=key+'='+value+';expires='+ddate; 39 } 40 function removeCookie(name){ 41 setCookie(name,'随意值',-1) 42 } 43 alert(document.cookie) 44 removeCookie('name') 45 alert(document.cookie) 46 removeCookie('qq') 47 alert(document.cookie) 48 // alert(getCookie('name')) 49 // alert(getCookie('email')) 50 // alert(getCookie('qq')) 51 52 </script> 53 </body> 54 </html>