js中cookie 的添加、查询、删除

一、cookie的认识

cookie是客户端的会话跟踪技术，可以存储一些数据；很多人容易将它和 session弄混了，session 是服务器端的会话跟踪技术。

二、使用cookie时的一些注意点：

   ① cookie的有效作用范围是当前浏览器，如果设置了cookie，但是后来有取消了，cookie仍然还在，默认情况下，它的作用范围是一次会话，在浏览器关闭就是一次会话的结束。

   ② cookie是不可以跨浏览器的，即不同浏览器

   ③ 一个网页可以设置多个cookie，但是每个网页有个数限制，每个网站也有个数的限制，不同的浏览器限制个数也是不同，这里就不一一列举各大浏览器具体的限制个数，因为网上有很多这样的资料。

   ④ 在设置cookie的时候，不能一次设置多个，要设置多个，必须分开设置

    //设置多个cookie的错误方式
    document.cookie = "name =zhangsan; age =18";

  //设置多个cookie的正确设置方式
    document.cookie = "name=zhangsan";
    document.cookie= "age=18";

   ⑤ 可以通过expries =xxx格式来设置cookie的过期时间，如果不设置，默认的过期时间就是一次会话；设置的过期时间如果大于当前时间，那么cookie有限，反之自动失效；当cookie处于有效时间内，就算关闭了浏览器，再次打开，仍然有效。

   

       //设置过期时间的格式
        var exp = new Date();
        exp.setTime(exp.getTime()+60*1000*60*24);//一天时间
        document.cookie = "name=zhangsan; expires="+exp.toGMTString()+"; "; 

    

　　　　 让cookie变过期的方式，只需要让过期时间小于当前时间即可：

 　　　　exp.setTime( - exp.getTime()+60*1000*60*24);

三、封装的添加、查询和删除方法

添加cookie的方法:

            function addCookie(key,value,expires) {  //key:添加cookie的键，value：添加cookie的值，expires:几天之后过期
            if(!expires){  //是否传入过期时间
                document.cookie = key+'='+value+'; ';
            }
            else {
                var exp = new Date();
                exp.setTime(exp.getTime() +60 * 1000 * 60 *24 *expires);
                document.cookie = key+'='+value+'; expires ='+exp.toGMTString()+'; ';
            }
        }
        //调用添加cookie
        addCookie("name","zhangsan",4);

获取指定cookie 的方法

首先我们要知道cookie打印出来的格式是什么样的，才能够去获取到它的准确值

 

    打印出来cookie的格式为： name=zhangsan; age=23

接下来我们就封装获取cookie指定值的方法：

  function getCookie(key) {
        var cookieArr = document.cookie.split(';');
        for (var i=0,len=cookieArr.length; i<len ;i++){
            var tempArr = cookieArr[i].split('=');
            console.log(tempArr);
            if (tempArr[0].trim() ==key){  //去出前后多余空格
                return tempArr[1];
            }
        }
  }

删除指定的cookie值

删除指定cookie的原理就是利用设置过期时间的方式

  function delCookie(key) {
            addCookie(key,getCookie(key),-1);
        }
        delCookie('name');
}

我们开发中，还是比较多的用到cookie，那么每次都写这些代码还是比较繁琐，大家可以将封装的这几个方法放在我js文件中，需要时直接调用，省时省力，利用更多的时间去创造，尽量不要来来回回重复这些代码。