操作cookie

最新推荐文章于 2023-07-08 23:29:44 发布

weeds606

最新推荐文章于 2023-07-08 23:29:44 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/103288176

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、操作cookie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-ajax-cookie</title>
    <script>
        window.onload = function (ev) {
            /*
        * cookie:会话跟踪技术，客户端
        * session：会话跟踪技术 服务端
        *
        * cookie作用：将网页中的数据存储到浏览器中
        *
        * cookie生命周期：默认情况下生命周期是一次会话，即浏览器关闭后失效
        * 如果通过expries=设置了过期时间，并且过期时间没有过期，那么下次打开浏览器时，cookie还存在
        * 如果通过expries=设置了过期时间，如果已经过期了，那么会立即删除保存的数据
        *
        * cookie注意点：默认不会保存任何数据
        * cookie不能一次设置多条数据，要保存多条数据只能一条一条的设置
        * cookie有大小和个数的限制，根据浏览器的不同，限制不同
        * 个数限制：20-50
        * 大小限制：4kb左右
        *
        * cookie的作用范围
        * 同一浏览器的同一路径下
        * 如果在同一浏览器中，默认情况下下一级路径是可以访问cookie的，上一级无法访问
        * 如果想要所有路径都可以访问cookie，需要在cookie中添加path=/;
        * 如果在www.dou.com下保存了一个cookie，想要在edu.dou.com中访问，需要再添加一句代码domain=dou.com
        * document.cookie = "age=12;domain=dou.com;path=/;expires=" + date.toGMTString() + ";";
        * */
            document.cookie;
            //设置cookie的过期时间
            var date = new Date();
            date.setDate(date.getDate() + 1);

            //存储cookie
            document.cookie = "name=doudou;expires=" + date.toGMTString() + ";";
            //存储cookie，所有路径都可以访问
            document.cookie = "age=12;path=/;expires=" + date.toGMTString() + ";";

            //获取cookie
            console.log(document.cookie);
        };

    </script>
</head>
<body>

</body>
</html>

二、封装操作cookie方法，文件名称为jquery-cookie.js

;(function($, window) {
    $.extend({
        addCookie:function(key, value, day, path, domain) {
        var index = window.location.pathname.lastIndexOf("/");
        var current = window.location.pathname.slice(0,index);
        //不传入path时，默认为当前路径，current为当前路径
        path = path || current;
        //不传入domain时，默认为当前域名,document.domain为当前域名
        domain = domain || document.domain;
        //不传入有效日期时，默认为一次会话有效
        if (!day){
            document.cookie =
                key + "=" + value +
                ";path" + "=" +path +
                ";domain" + "=" + domain + ";";
        }
        else {
            var date = new Date();
            date.setDate(date.getDate() + day);

            document.cookie =
                key + "=" + value +
                ";path" + "=" +path +
                ";domain" + "=" + domain +
                ";expires=" + date.toGMTString() + ";";
        }
    },
        getCookie:function (key) {
        var res = document.cookie.split(";");
        for (var i=0;i<res.length; i++){
            var temp = res[i].split("=");
            if (temp[0].trim() === key){
                return temp[1]
            }
        }
    },
        delCookie:function (key, path) {
            $.addCookie(key, $.getCookie(key), -1, path)
    }
    })
})(jQuery, window);

三、调用封装好的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-cookie-调用</title>
    <!--引入jQuery包-->
    <script src="../jquery-1.12.4.js"></script>
    <!--调用操作cookie的jQuery包-->
    <script src="../jquery-cookie.js"></script>
    <script>
        window.onload = function(ev){
            //调用增加cookie方法
            $.addCookie("sex","you",1,"/","127.0.0.1");
            $.addCookie("test","you",1,"/","127.0.0.1");
            //调用查询cookie方法
            console.log($.getCookie("sex"));
        //    调用删除cookie方法
            $.delCookie("sex","/")
        };
    </script>

</head>
<body>

</body>
</html>

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作cookie

一、操作cookie<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>11-ajax-cookie</title> <script> window.onload = functio...
复制链接

扫一扫