jquery.cookie的用法代码实例

18-07-11 来源：[db:作者]

收藏我要投稿

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <title>次数存入cookie</title>
</head>
<body>
    <span>  </span>
    <br>
    <button id="add">
        clickNum++;
    </button>
    <button id="sub">
        clickNum--;
    </button>
<script>
    $(function () {
        var $add = $("button#add"),
            $sub = $("button#sub"),
            dialog =  "次数用尽了，明日再来哦";
        var clickNum = parseInt($.cookie("clickNumCount"));  // 里面的值为string类型，转为数字
        console.log(clickNum)
        console.log(typeof clickNum);
        //做一个判断，是否有cookie存在，如果无测重新赋值10
        if((typeof(clickNum) === "number" && !isNaN(clickNum)) || $.cookie("clickNumCount") == dialog ){
            console.log(clickNum);
            $("span").text($.cookie("clickNumCount"));
            console.log("有值,存入当前cookie");
        }else{
            clickNum = 10;
            $("span").html(clickNum);
            console.log("无值，重新赋值");
            $.cookie('clickNumCount', clickNum, { expires: 1 });
            $("#clickNum").html(clickNum);
        }
        $add.click(function() {
            if (clickNum > 0) {
                clickNum++;
                $("span").text(clickNum);   //赋值
                console.log(clickNum);
                $.cookie('clickNumCount', clickNum, { expires: 1 });  //存入
            } else {
                console.log($.cookie("clickNumCount"));
            }
        });
        $sub.click(function () {
            if (clickNum > 0) {
                console.log(clickNum);
                clickNum--;
                console.log(clickNum);
                $.cookie('clickNumCount', clickNum, {expires: 1});   //存入
                $("span").html(clickNum);   //赋值
            }else {
                $.cookie('clickNumCount', dialog, {expires: 1});   //存入
                console.log($.cookie("clickNumCount"));
                $("span").html(dialog);
            }
        });
    });
</script>
</body>
</html>

以上代码中可以直接复制到编辑器中，在浏览器上查看效果，用法不难，务必要快速脱离文档熟悉使用。

点击复制链接与好友分享!回本站首页