cookie的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button>存储cookie</button>
<button>获取cookie</button>
<button>存储带时长的cookie</button>
<button>删除cookie</button>
<button>修改cookie</button>
<button>单个cookie</button>
<button>清空所有cookie</button>

//此文件必须引入
<script src="jquery-1.11.3.js"></script>

<script>
    //cookie的调用

    //存储
    $("button").eq(0).click(function () {
        cookieTools.setItem({
        username:"dabao",
        age:12,
        location:"文化大厦",
    })
    });


    //获取
    $("button").eq(1).click(function () {
        console.log(cookieTools.getAllCookies());
    })
    
 //存储有到期时间的
    $("button").eq(2).click(function () {


       cookieTools.setItem({
            name: "dabao",

        },10000);

    })

    //删除
    $("button").eq(3).click(function () {
        cookieTools.removeItem("username")

    })

    //修改
    $("button").eq(4).click(function () {
        cookieTools.modifyItem("username","白白")

    })

    //单个
    $("button").eq(5).click(function () {
        console.log(cookieTools.getItem("location"));


    })
    //清空所有
    $("button").eq(6).click(function () {

        cookieTools.clear()




    })
















    //cookie的封装
    var cookieTools={


        //根据毫秒值获取GMT格式
        getGMT:function (ms) {
            var str=new Date().getTime()+ms;
            return new Date(str).toGMTString();
        },


        setItem:function(json,expiresMS){
            for(var k in json){
                if(typeof expiresMS!="number"){
                    //表示没传expiresMS参数 那就默认没有到期时间
                    document.cookie=`${k}=${json[k]}`
                }else{
                    //表示有到期时间
                    document.cookie=`${k}=${json[k]}; expires=${this.getGMT(expiresMS)}`;
                }

            }

        },


        //获取所有的cookie
        getAllCookies:function () {
            var json={};
            if (!document.cookie) return json;
            document.cookie.split("; ").forEach(function (item) {
                var arr=item.split("=");
                json[arr[0]]=arr[1];

            })

            return json;

        },

        //根据键删除指定的值

        removeItem:function (key) {
            document.cookie=`${key}=any; expires=${this.getGMT(-100000)}`;

            return true;


        },

        //根据建修改值

        modifyItem:function (oldKey,newValue,expiresMS) {
            if (this.getAllCookies()[oldKey]==undefined) return false;

            if (typeof expiresMS!="number"){
                document.cookie=`${oldKey}=${newValue}`;
            }else {
                document
                .cookie=`${oldKey}=${newValue}; expires=${this.getGMT(expiresMS)}`
            }

            return  true;


        },



        //获取单个
        getItem:function (key) {
            return this.getAllCookies()[key];

        },

        //清空所有

        clear:function () {
            return this.setItem(this.getAllCookies(),-1000)

        }





    }
</script>



</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值