概念

cookie叫做会话跟踪技术，在一次会话从开始到结束的整个过程中，全程跟踪记录客户端的状态。

简介

cookie:

  • 1.可以设置过期时间

  • 2.最大可以存储4KB，每一个域名下最多可以存储50条数据（不同的浏览器，有偏差）

    【只能是字符串】

语法

格式：

name=value;expires=date;path=path;domain=somewhere.com;secure,
name 健
value 值 都是自定义

encodeURIComponent 将中文编译成对应的字符
decodeURIComponent 将对应的字符编译成中文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script> //设置cookie document.cookie = 'username=' + encodeURIComponent('钢铁侠'); //获取cookie alert(decodeURIComponent(document.cookie)); /* expires: 过期时间 必须填写，日期对象 【】系统会自动清除过期的cookie */ /* path 限制访问路径 如果不去设置，默认是加载当前.html文件的路径 【】我们设置的cookie的路径，和加载当前文件的路径，必须一直，如果不一致，cookie访问失败 */ /* domain 限制访问域名 如果不去设置，默认是加载当前.html文件的域名 【】如果加载当前文件域名和设置的域名不一样，设置cookie失败 */ /* secure 如果不设置，设置cookie，可以通过http协议加载文件设置， 也可以通过https协议加载文件设置 设置这个字段以后，只能设置https协议加载cookie */ </script>
</body>
</html>

打开浏览器的控制台，就能发现有一条cookie了

cookie的封装

首先封装设置cookie的方法

		//先封装一个得到几天后日期的函数，从而方便设置cookie几天后过期
        function afterDate(n) {
   
            var d = new Date();
            var day = d.getDate();
            d.setDate(n + day);
            return d;
        }
		//设置cookie函数
        function setCookie(name, value, {
     expires, path, domain, secure }) {
   
            var cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value);
            if (expires) {
   
                cookieStr += ';expires' + afterDate(expires);
            }
            if (path) {
   
                cookieStr += ';path=' + path;
            }
            if (domain) {
   
                cookieStr += ';domain' + domain;
            }
            if (secure) {
   
                cookieStr += ';secure';
            }
            document.cookie = cookieStr;
        }

这个setCookie()封装好后测试一下

        setCookie("超级英雄","钢铁侠",{
   
            expires: 3
        });
        setCookie("西游记","孙悟空",{
   
            expires: 3
        });
        setCookie("三国","刘备",{
   
            expires: 3
        });
        //document.cookie包含所有的cookie
        alert(decodeURIComponent(document.cookie));
        //超级英雄=钢铁侠; 西游记=孙悟空; 三国=刘备

如何得到其中一条cookie，getCookie()的封装

        function getCookie(name) {
   
        	//超级英雄=钢铁侠; 西游记=孙悟空; 三国=刘备
            var cookieStr = decodeURIComponent(document.cookie);
            //找到指定字符串开始的位置
            var start = cookieStr.indexOf(name + '=');
            if(start == -1) {
   
                return null;
            }else{
   
                var end = cookieStr.indexOf(";",start);
                if(end == -1) {
   
                    end = cookieStr.length;
                }
                var str = cookieStr.substring(start,end);
                //对获取的字符串进行分割
                var arr = str.split("=");
                return arr[1];
            }
        }

测试一下结果

alert(getCookie("超级英雄"));


然后封装removeCookie()

        function removeCookie(name) {
   
        	//只需要将cookie的时间设置为已经过期的时间就可以了
            document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
        }

最后将这三个函数可以再封装成一个函数

        function $cookie(name) {
   
            switch(arguments.length){
   
                case 1:
                    return getCookie(name);
                    break;
                case 2:
                    if(arguments[1] == null) {
   
                        removeCookie(name);
                    }else{
   
                        setCookie(name,arguments[1],{
   });
                    }
                    break;
                default:
                    setCookie(name,arguments[1],arguments[2]);
                    break;
            }
        }

这样就可以根据输入的内容来判断要进行什么操作
附上cookie.js

function afterDate(n) {
   
    var d = new Date();
    var day = d.getDate();
    d.setDate(n + day);
    return d;
}

function setCookie(name, value, {
     expires, path, domain, secure }) {
   
    var cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires) {
   
        cookieStr += ';expires' + afterDate(expires);
    }
    if (path) {
   
        cookieStr += ';path=' + path;
    }
    if (domain) {
   
        cookieStr += ';domain' + domain;
    }
    if (secure) {
   
        cookieStr += ';secure';
    }
    document.cookie = cookieStr;
}

function getCookie(name) {
   
    var cookieStr = decodeURIComponent(document.cookie);
    var start = cookieStr.indexOf(name + '=');
    if(start == -1) {
   
        return null;
    }else{
   
        var end = cookieStr.indexOf(";",start);
        if(end == -1) {
   
            end = cookieStr.length;
        }
        var str = cookieStr.substring(start,end);
        var arr = str.split("=");
        return arr[1];
    }
}

function removeCookie(name) {
   
    document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}

function $cookie(name) {
   
    switch(arguments.length){
   
        case 1:
            return getCookie(name);
            break;
        case 2:
            if(arguments[1] == null) {
   
                removeCookie(name);
            }else{
   
                setCookie(name,arguments[1],{
   });
            }
            break;
        default:
            setCookie(name,arguments[1],arguments[2]);
            break;
    }
}