设置/读取/删除cookie(整合版)

约定不等于承诺〃 2021-09-15 00:26 346阅读 0赞

**cookie的介绍:**

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了某一变量的值，在B页面的时候，同样需要使用JS来引用temp的变量值，对于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值，那么如何来设置和读取cookie呢？   
  
首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

**js操作cookie的原理方式:**

JS设置cookie:  
假设在A页面中要保存变量username的值("jack")到cookie中,key值为123，则相应的JS代码为：   
document.cookie="jack=123";

JS读取cookie:

方式1

假设cookie中存储的内容为：name=jack;password=123    
则在B页面中获取变量username的值的JS代码如下：

var username=document.cookie.split(";")\[0\].split("=")\[1\];

方式2

js中并没有提供获取cookie的方法，所以只能自己封装方法，相同的key的cookie只能存在一个，如果定义了一个document.cookie="age=21",后面又定义了document.cookie="age=30"，那么后面定义的cookie会覆盖前面定义的cookie，所以修改cookie值的时候只用重新定义个key相同的cookie就可以了。那么获取cookie的时候也只用在cookie中获取到这个key后面的“=”和“；”直接的字符串，那就是这个cookie的值了，获取的方法又很多种，这里一种比较简单的：

function getCookie(key){
      var index = document.cookie.indexOf(key);
      var returnValue;
      if(index!==-1){
        var tIndex = document.cookie.indexOf(";",index);
        var target = document.cookie.substring(index,tIndex);
        var returnValue = decodeURIComponent(target.replace(key+"=",""))
      }
      return returnValue;
    }
     
    document.cookie="name=weiqi";
    getCookie("name"); //weiqi

**删除cookie**

cookie是有有效期的，前面我们设置cookie的时候都没有设置有效期，如果我们将cookie的有效期设置成一个已经过去的时间，那么它就无效了，下面来实现一下：

function delCookie(key){
      var d = new Date();
      document.cookie=key+"=;expires="+ d.toGMTString();
    }
     
    document.cookie="name=weiqi";
    delCookie("name"); //undefined

**给cookie设置一个有效期**

**方式1**

通过expires给cookie设置一个有效期，现在我们设置一个cookie的有效期是10天，如下：

var d = new Date();
    var time = 10;
    d.setTime(d.getTime()+time*1000*60*60*24);
    document.cookie="name=weiqi;expires="+ d.toGMTString();

**方式2**

function setCookie(name, value, days) { //设置cookie
         var d = new Date();
         d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
         var expires = "expires=" + d.toUTCString();
         document.cookie = name + "=" + value + "; " + expires;
        }

设置方式:

setCookie("key", 'zhangsan', 1);

//设置cookie的名字为key,值为zhangsan,保存时间1天

**封装cookie**

将自定义的一些方法完善一下封装成一个对象，这样在使用的时候就可以直接拿来用了：

//封装cookie方法的对象
    var cookie = {
      setCookie:function(key,value,time){
        if(key == undefined){
          return;
        }
        if(time!== undefined){
          var d = new Date();
          d.setTime(d.getTime()+time*1000*60*60*24);
          document.cookie=key+"="+value+";expires="+ d.toGMTString();
        }else{
          document.cookie=key+"="+value;
        }
      },
      getCookie:function(key){
        var index = document.cookie.indexOf(key);
        var returnValue;
        if(index!==-1){
          var tIndex = document.cookie.indexOf(";",index);
          var target = document.cookie.substring(index,tIndex);
          var returnValue = decodeURIComponent(target.replace(key+"=",""))
         }
        return returnValue;
      },
      delCookie:function(key){
        var d = new Date();
        document.cookie=key+"=;expires="+ d.toGMTString();
      }
    }
     
     
    //测试
    cookie.setCookie("home")
    cookie.setCookie("name","卫旗",1);//保存1天
    cookie.setCookie("age",22);
    cookie.setCookie("sex","男")
    cookie.getCookie("sex")
    cookie.delCookie("age")

1.设置cookie

function setCookie(name,value) 
    { 
        var Days = 30; 
        var exp = new Date(); 
        exp.setTime(exp.getTime() + Days*24*60*60*1000); 
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
    }

2.读取cookie

function getCookie(name) 
    { 
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
     
        if(arr=document.cookie.match(reg))
     
            return unescape(arr[2]); 
        else 
            return null; 
    }

3.删除cookie

function delCookie(name) 
    { 
        var exp = new Date(); 
        exp.setTime(exp.getTime() - 1); 
        var cval=getCookie(name); 
        if(cval!=null) 
            document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
    }

4.设置cookie,并自定义过期时间

使用示例:

//s20是代表20秒   
//h是指小时，如12小时则是：h12   
//d是天数，30天则：d30   
  
setCookie("name","hayden","s20");