什么是cookie?几行代码认识cookie,并学会cookie的封装

最新推荐文章于 2024-05-28 22:26:28 发布

boboj1

最新推荐文章于 2024-05-28 22:26:28 发布

阅读量353

点赞数 3

分类专栏： JavaScript 文章标签： cookie js 前端

本文链接：https://blog.csdn.net/Wind_AN/article/details/117401926

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

概念

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;
    }
}

boboj1

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
什么是cookie?几行代码认识cookie,并学会cookie的封装

概念cookie叫做会话跟踪技术，在一次会话从开始到结束的整个过程中，全程跟踪记录客户端的状态。简介cookie:1.可以设置过期时间2.最大可以存储4KB，每一个域名下最多可以存储50条数据（不同的浏览器，有偏差）【只能是字符串】语法格式：name=value;expires=date;path=path;domain=somewhere.com;secure,name 健value 值都是自定义encodeURIComponent 将中文编译成对应的字符dec
复制链接

扫一扫