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 创建

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

 </head>

 <body>

   <script>

   /*

   //普通方法创建cookie，如果多条的话比较繁琐

    document.cookie='name=jiyanpeng';

    document.cookie='qq=365966179';

    document.cookie='email=365966179@qq.com';

   //封装创建cookie的函数1

   function setCookie(key,value,expires){

       var ddate=new Date();

           ddate.setDate(ddate.getDate()+expires)

       document.cookie=key+'='+value+';expires='+ddate;

       alert(document.cookie)

   }

   setCookie('name1','jiyanpeng1',10);

   setCookie('name3','jiyanpeng3')

 */

   //封装创建cookie的函数2

   function setCookie(key,value,expires){

       document.cookie=key+'='+value+';expires='+ddate(expires);

   }

       function ddate(expires){

       var ddate=new Date()

         ddate.setDate(ddate.getDate()+expires)

         return ddate

     }

     setCookie('name4','jiyanpeng4',30);

     //alert(ddate(7))

   </script>

 </body>

 </html>

4-5 查询

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

 </head>

 <body>

   <script>

   /*

   //封装创建cookie的函数2

   function setCookie(key,value,expires){

     document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires); //1、encodeURIComponent对中文进行编码

   }

     function ddate(expires){

       var ddate=new Date()

         ddate.setDate(ddate.getDate()+expires)

         return ddate

     }

     setCookie('name','吉延鹏')

     setCookie('qq','365966179')

     setCookie('email','365966179@qq.com')

     //alert(document.cookie)

     //split() 方法用于把一个字符串分割成字符串数组。

     var str='name1=aaa;name2=bbb;name3=ccc;';

     var arrStr=str.split(';')

     //alert(arrStr);

     //alert(arrStr[0]); //name1=aaa

     var arr=arrStr[0].split('=')

     //alert(arr[0]+'\n'+arr[1])

 */

     //读取cookie

     function getCookie(name){

       var arrStr=document.cookie.split(';');

       //alert(arrStr)

       for(var i=0;i<arrStr.length;i++){

         var arr=arrStr[i].split('=')

         //alert(arr[0]+'\n'+arr[1])

         if(arr[0]==name){return arr[1] }

       }

      return ''

     }

    alert(getCookie('email'))

   </script>

 </body>

 </html>

4-6 删除

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

 </head>

 <body>

   <script>

   //封装创建cookie的函数2

   function setCookie(key,value,expires){

     document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires);

   }

     function ddate(expires){

       var ddate=new Date()

         ddate.setDate(ddate.getDate()+expires)

         return ddate

     }

     setCookie('name','吉延鹏')

     setCookie('qq','365966179')

     setCookie('email','365966179@qq.com')

     //读取cookie

     function getCookie(name){

       var arrStr=document.cookie.split('; ');

       //alert(arrStr)

       for(var i=0;i<arrStr.length;i++){

         var arr=arrStr[i].split('=')

         //alert(arr[0]+'\n'+arr[1])

         if(arr[0]==name){return decodeURIComponent(arr[1]) } //2、decodeURIComponent解码

       }

      return ''

     }

     function setCookie(key,value,expires){

       var ddate=new Date();

         ddate.setDate(ddate.getDate()+expires)

       document.cookie=key+'='+value+';expires='+ddate;

     }

     function removeCookie(name){

         setCookie(name,'随意值',-1)

     }

    alert(document.cookie)

    removeCookie('name')

    alert(document.cookie)

    removeCookie('qq')

     alert(document.cookie)

    // alert(getCookie('name'))

    // alert(getCookie('email'))

    // alert(getCookie('qq'))

   </script>

 </body>

 </html>

js cookie创建读取删除函数封装的更多相关文章

  1. js动态创建表格,删除行列的小例子

    js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. jQuery 操作Cookie 存储 读取 删除等

    <script type="text/javascript" src="/UI.Web.CRM.Main/js/jquery-2.1.1.min.js"& ...

  3. cookie创建，删除

    Cookie 历来指就着牛奶一起吃的点心.然而,在因特网内,“Cookie”这个字有了完全不同的意思.那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览 ...

  4. PHP中的cookie创建取回删除；

    <?php $expire=time()+3600;//设置过期cookie时间 setcookie('yaoyuan',"webyaoyuan",$expire);//se ...

  5. Node.js：创建应用+回调函数（阻塞/非阻塞）+事件循环

    一.创建应用 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi.从这个角度看,整个"接收 HTTP ...

  6. 创建/读取/删除Session对象

    //创建Session对象 Session["userName"] = "顾德博";//保存,这里可以存储任意类型的数据,包括对象.集合等 Session.Ti ...

  7. JS cookie 设置 查看 删除

    JScookie 常用的3个预设函数(库) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&q ...

  8. js动态创建和删除option

    1.动态创建select function createSelect(){           var mySelect = document.createElement("select&q ...

  9. 通过JS动态创建和删除HTML元素

    <script type="text/javascript" language="Javascript"> function InputOnBlur ...

随机推荐

  1. C/C++(函数)

    函数 函数三要素:函数名,参数,返回值 重点研究函数的输入输出 随机数函数 //产生一组随机数 #include<stdio.h> #include<stdlib.h> #in ...

  2. module.exports，exports和export default，export的区别

    前提:CommonJS模块规范和ES6模块规范是完全不同的两个概念. module.exports,exports属于CommonJS模块规范: export default,export属于ES6模 ...

  3. IntelliJ IDEA如何导入maven结构的web工程

    第一步:打开一个现有(也可以不打开,直接用import选择Maven类型)的IntelliJ IDEA工程,点击菜单的"File"->"new"-> ...

  4. CDN服务上线，DNSPOD布局云端生态圈

    爱因斯坦曾说过,我从不去想未来,由于它来得已经够快的了.是的,随着互联网的高速发展,我们的生活节奏越来越快,可是人们的耐心却像鞋底一样越磨越薄. 遥控器按一下,鼠标点一下,仅仅要认为没意思或者等待时间 ...

  5. 购买VPS时机房的选择

    购买VPS时机房的选择 对于配置差不多的VPS,距离越近的一般网速越快,所以有必要使用谷歌地图,查看城市的所在位置 比如ChicagoVPS,不时有邮件销售它的VPS,虽然说不上怎么好,但是一般的使用 ...

  6. ELK之日志查询、收集与分析系统

    项目由来 (1)开发人员不能登录线上服务器查看详细日志,经过运维周转费时费力 (2)日志数据分散在多个系统,难以查找与整合 (3)日志数据量巨大,查询速度太慢,无法满足需求 (4)无法全局掌控项目运行 ...

  7. eclipse4.3怎么集成jadclipse追踪源代码，现在windows-preferences-java

      A.将net.sf.jadclipse_3.2.4.jar复制到D:\leaf\eclipse\plugins目录下.  B.在d:\leaf下建立ecliplsePlungin\jadclips ...

  8. R语言-有负下标里才干有零

    1.仅仅有负下标里才干有零 先看一个样例 >a<-c(1,2,3,4) >a[-1:1] > a[-1:1] Error in a[-1:1] : 仅仅有负下标里才干有零 (1 ...

  9. 计算两个String 类型的时间相关几个月

    /** * 返回两个时间段相隔几个月 * @param date1 * @param date2 * @return * @throws ParseException * @throws ParseE ...

  10. 2.lombok系列2：lombok注解详解

    转自:https://www.imooc.com/article/18157 开篇 看到第一篇<初识lombok>你可能意犹未尽,本文我们按照场景来介绍一下常用的注解. 未特别说明,均标注 ...