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. button按钮下边框有立体效果样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HDU 1716 排列2

    排列2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. Tomcat之——配置项目有虚拟路径

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47024863 非常easy,在Tomcat的Server.xml文件里的Host节 ...

  4. ajax同时请求多个服务器？

    这是地址, http://119.29.23.116/info.php 大侠你怎么看 想利用雅黑探针检测服务器的在线状态,但对AJAX多个请求不会操作 header('Access-Control-A ...

  5. H5+混合移动app

    H5+混合移动app 前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多.... ...

  6. 记2018/4/29 qbxt 测试

    记 2018/4/29  qbxt 测试(提高基础班) 简单的 NOIP 模拟赛 竞赛时间: 2018 年 4 月 29 日 13:30-17:00 题目名称 乘法 求和 计数 输入文件名 mul.i ...

  7. CODEVS——T1979 第K个数

    http://codevs.cn/problem/1979/ 时间限制: 1 s  空间限制: 1000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descript ...

  8. 基于Eclipse的Android JNI层測试应用开发过程记录

    前言 本文记录一个Java层与JNI层參数与数据交互的应用程序开发过程.为实现一个功能完整的带Java与JNI的应用程序打下基础. 本文如果读者已搭建好Android的Eclipse与NDK开发环境, ...

  9. Linux 网卡驱动学习（九）（层二转发）

    1.mac 地址表的自学习过程 port1上的A计算机要与port2上的B计算机通信时,A发到交换机上,交换机收到信息后,交换机先记录发port1所相应的a的mac地址并记录在自己的mac表中,然后再 ...

  10. python 命令行參数解析

    本文是从我还有一个博客转载过来的,欢迎大家点击进去看一下,帮我添加点人气^_^ ImPyy 选择模块 依据python參考手冊的提示,optparse 已经废弃,应使用 argparse 教程 概念 ...