JavaScript Cookie的操作

认识cookie

什么是cookie？

• cookie是 存储与访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。当用户下次访问同一个页面时，服务器会先查看有没有上次留下的cookie资料，如果有就根据cookie里的资料判断访问者，发送特定的页面内容
• 常见应用场景：自动登录，记住用户名等
• 最初是用来着客户端和服务端进行通信使用的，所以原则上应该在服务器运行环境下进行。目前大部分浏览器可以在客户端生成和读取cookie数据

创建cookie

• 格式：
  将document下的cookie属性值设置为如下键值对格式的字符串：name=value

• 为避免特殊字符造成的错误，有时需要对数据进行编码解码
  1、使用encodeURIComponent()进行编码
  2、读取时使用decodeURIComponent()解码
  3、cookie值不能含有分号，逗号和空白符

cookie的可选参数

• expires=时间：过期时间
  1、默认值为浏览器关闭后过期（即会话结束后）
  2、将expires设置为过去的时间可以删除cookie

• path
  它指定了与cookie关联在一起的网页。默认值是在和当前网页统一目录的网页中有效。如果把path设置为“/”，那么它对该网站所有网页可见

• domain
  设定cookie的有效域名，一般使用默认值，即绑定当前域名，本地测试无效

• secure
  指定了网络上如何传输cookie，默认为普通http协议传输；若设置为安全的，将只能通过https安全协议才可以传输

封装cookie的操作函数

创建cookie数据的函数封装

    <script>
        // 普通方法创建cookie，如果多条的话比较繁琐
        // document.cookie = "name=OliGit";
        // document.cookie = "age=22";
        
        //封装创建cookie的函数1
        // function setCookie(name, value, expires){
        //     var date = new Date();
        //         date.setDate(date.getDate() + expires);
        //     document.cookie = name + "=" + value + ";expires=" + date;
        // }
        // setCookie("name3", "dasheng3");
        // setCookie("name2", "DaSheng2", 10);


        //封装创建cookie的函数2
        function setCookie(name, value, expires){
            document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) +
             ";expires=" + cookieDate(expires);
        }
        function cookieDate(expires){
            var date = new Date();
                date.setDate(date.getDate() + expires);
                return date;
        }
        // alert(cookieDate(10));
        setCookie("name4", "heiha", 10);
    </script>

读取cookie数据的函数封装

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

//读取cookie的数据封装
        // split()方法用于把一个字符串分割成字符串数组
        // var str = "name=aaa;name2=bbb;name3=ccc;"
        // var arrStr = str.split(";");
        // alert(arrStr);//name=aaa,name2=bbb,name3=ccc,

        function getCookie(name){
            // 对cookie字符串进行键值对分割
            var cookieArr = document.cookie.split('; ');
            // alert(cookieArr);
            for (var i = 0; i < cookieArr.length; i++){
                //对cookie的键值对进行名称与值分割
                var cookieStr = cookieArr[i].split('=');
                // alert("名称：" + cookieStr[0] + "\n值：" + cookieStr[1]); 

                if(decodeURIComponent(cookieStr[0]) == name){
                    return decodeURIComponent(cookieStr[1]);
                }
            }
            return "";
        }
        setCookie("级别", "超级会员");
        alert(getCookie("name2"));
        alert(getCookie("age"));
        alert(getCookie("级别"));

删除cookie的函数封装

通过设置cookie的有效期删除

//删除cookie
        function removeCookie(key){
            // 通过设置cookie的有效期删除
            setCookie(key, "随意值", -1);
        }
        alert(document.cookie);
        removeCookie("name111");
        alert(document.cookie);

cookie的限制

• 数量（20-50，不同浏览器有差异），大小有限（4K）
• 有些数据不适合使用cookie保存，比如银行卡号等重要的信息