JQuery Cookie使用

JQuery Cookie插件下载 https://github.com/js-cookie/js-cookie

Create session cookie:

$.cookie('name', 'value');

Create expiring cookie, 7 days from then:

$.cookie('name', 'value', { expires: 7 });

Create expiring cookie, valid across entire site:

$.cookie('name', 'value', { expires: 7, path: '/' });

Read cookie:

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

Read all available cookies:

$.cookie(); // => { "name": "value" }

Delete cookie:

// Returns true when cookie was successfully deleted, otherwise false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// Need to use the same attributes (path, domain) as what the cookie was written with
$.cookie('name', 'value', { path: '/' });
// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true
$.cookie('name', '');

判断Cookie是否存在

if ($.cookie("name") == "value") {
    console.log('Cookie已经存在');
} else {
    console.log("Cookie不存在");
}

 检测Cookie的例子，如果存在Cookie按钮为灰不可用，如果不存在则正常使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <title>Document</title>
</head>

<body style="padding-top:30px">
    <div class="container">
        <input type="text" name="" id="user">
        <div id='user'>
            <a href="echo.php?id=10" class="btn btn-danger btn-sm">提交</a>
            <a href="echo.php?id=11" class="btn btn-danger btn-sm">提交</a>
            <a href="echo.php?id=12" class="btn btn-danger btn-sm">提交</a>
            <a href="echo.php?id=13" class="btn btn-danger btn-sm">提交</a>
        </div>
        <a href="echo.php?id=14" class="btn btn-danger btn-sm">提交</a>
        <a href="echo.php?id=15" class="btn btn-danger btn-sm">提交</a>
        <a href="echo.php?id=16" class="btn btn-danger btn-sm">提交</a>
        <a href="echo.php?id=17" class="btn btn-danger btn-sm">提交</a>
        <a href="echo.php?id=18" class="btn btn-danger btn-sm">提交</a>
        <a href="echo.php?id=19" class="btn btn-danger btn-sm">提交</a>
    </div>
    <script>
        $(function () {
            if($.cookie("name")=="value"){
                $('#user a').removeClass().addClass("btn btn-default btn-sm disabled");
                console.log('Cookie已经存在');
            }else{
                console.log("Cookie不存在");
            }

            $("a").click(function (event) {
                event.preventDefault();
                $('#user a').removeClass().addClass("btn btn-default btn-sm disabled");
                $.cookie("name","value");
                });
            });
        })
    </script>
</body>
</html>

 

posted @ 2018-02-02 19:41  liessay  阅读(241)  评论(0)  编辑  收藏  举报