js cookie创建读取删除函数封装js cookie创建读取删除函数封装

51 阅读 0 评论 34 点赞

我是靠谱客的博主精明水壶，最近开发中收集的这篇文章主要介绍js cookie创建读取删除函数封装js cookie创建读取删除函数封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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]+'n'+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]+'n'+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]+'n'+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>