Làm cách nào để đặt / hủy đặt cookie với jQuery?

Làm cách nào để đặt và hủy đặt cookie bằng jQuery, ví dụ: tạo cookie có tên testvà đặt giá trị thành 1?

Cập nhật tháng 4 năm 2019

jQuery không cần thiết cho việc đọc / thao tác cookie, vì vậy đừng sử dụng câu trả lời ban đầu bên dưới.

Thay vào đó, hãy truy cập https://github.com/js-cookie/js-cookie và sử dụng thư viện không phụ thuộc vào jQuery.

Ví dụ cơ bản:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

Xem các tài liệu trên github để biết chi tiết.

Xem plugin:

https://github.com/carhartl/jquery-cookie

Sau đó bạn có thể làm:

$.cookie("test", 1);

Xóa:

$.removeCookie("test");

Ngoài ra, để đặt thời gian chờ của một số ngày nhất định (10 tại đây) trên cookie:

$.cookie("test", 1, { expires : 10 });

Nếu tùy chọn hết hạn bị bỏ qua, thì cookie sẽ trở thành cookie phiên và bị xóa khi trình duyệt thoát.

Để bao gồm tất cả các tùy chọn:

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

Để đọc lại giá trị của cookie:

var cookieValue = $.cookie("test");

Bạn có thể muốn chỉ định tham số đường dẫn nếu cookie được tạo trên một đường dẫn khác với đường dẫn hiện tại:

var cookieValue = $.cookie("test", { path: '/foo' });

CẬP NHẬT (Tháng 4 năm 2015):

Như đã nêu trong các bình luận bên dưới, nhóm làm việc với plugin ban đầu đã loại bỏ sự phụ thuộc jQuery trong một dự án mới ( https://github.com/js-cookie/js-cookie ) có cùng chức năng và cú pháp chung như phiên bản jQuery. Rõ ràng các plugin ban đầu không đi đâu cả.

Không cần sử dụng jQuery đặc biệt để thao tác cookie.

Từ QuirksMode (bao gồm các ký tự thoát)

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Hãy xem

• Làm cách nào để xóa tên lớp hiện có và thêm tên mới bằng jQuery và cookie?

<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

Bạn có thể đặt cookie như thế nào

setCookie('test','1','1'); //(key,value,expiry in days)

Bạn có thể lấy cookie như

getCookie('test');

Và cuối cùng bạn có thể xóa các cookie như thế này

eraseCookie('test');

Hy vọng nó sẽ giúp được ai đó :)

BIÊN TẬP:

Nếu bạn muốn đặt cookie cho tất cả thư mục đường dẫn / trang / thì hãy đặt thuộc tính đường dẫn cho cookie

function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString();
}

Cảm ơn, vicky

Bạn có thể sử dụng một plugin có sẵn ở đây ..

https://plugins.jquery.com/cookie/

và sau đó để viết một cookie $.cookie("test", 1);

để truy cập cookie đã đặt $.cookie("test");

Đây là mô-đun toàn cầu của tôi, tôi sử dụng -

var Cookie = {   

   Create: function (name, value, days) {

       var expires = "";

        if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           expires = "; expires=" + date.toGMTString();
       }

       document.cookie = name + "=" + value + expires + "; path=/";
   },

   Read: function (name) {

        var nameEQ = name + "=";
        var ca = document.cookie.split(";");

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },

    Erase: function (name) {

        Cookie.create(name, "", -1);
    }

};

Đảm bảo không làm điều gì đó như thế này:

var a = $.cookie("cart").split(",");

Sau đó, nếu cookie không tồn tại, trình gỡ lỗi sẽ trả về một số thông báo không có ích như ".cookie không phải là một chức năng".

Luôn luôn khai báo trước, sau đó thực hiện phân tách sau khi kiểm tra null. Như thế này:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");

Đây là cách bạn đặt cookie với JavaScript:

mã bên dưới đã được lấy từ https://www.w3schools.com/js/js_cookies.asp

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

bây giờ bạn có thể lấy cookie với chức năng dưới đây:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

Và cuối cùng đây là cách bạn kiểm tra cookie:

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Nếu bạn muốn xóa cookie, chỉ cần đặt tham số hết hạn thành ngày đã qua:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Một ví dụ đơn giản về đặt cookie trong trình duyệt của bạn:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery.cookie Test Suite</title>

        <script src="jquery-1.9.0.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script src="JSON-js-master/json.js"></script>
        <script src="JSON-js-master/json_parse.js"></script>
        <script>
            $(function() {

               if ($.cookie('cookieStore')) {
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              }

              $('#submit').on('click', function(){

                    var storeData = new Array();
                    storeData[0] = $('#inputName').val();
                    storeData[1] = $('#inputAddress').val();

                    $.cookie("cookieStore", JSON.stringify(storeData));
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              });
            });

       </script>
    </head>
    <body>
            <label for="inputName">Name</label>
            <br /> 
            <input type="text" id="inputName">
            <br />      
            <br /> 
            <label for="inputAddress">Address</label>
            <br /> 
            <input type="text" id="inputAddress">
            <br />      
            <br />   
            <input type="submit" id="submit" value="Submit" />
            <hr>    
            <p id="name"></p>
            <br />      
            <p id="address"></p>
            <br />
            <hr>  
     </body>
</html>

Đơn giản chỉ cần sao chép / dán và sử dụng mã này để đặt cookie của bạn.

Bạn có thể sử dụng thư viện trên trang web Mozilla tại đây

Bạn sẽ có thể đặt và nhận cookie như thế này

docCookies.setItem(name, value);
docCookies.getItem(name);

Tôi nghĩ Fresher đã cho chúng ta cách tốt đẹp, nhưng có một sai lầm:

    <script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
   </script>

Bạn nên thêm "giá trị" gần getTime (); nếu không thì cookie sẽ hết hạn ngay lập tức :)

Tôi nghĩ Vignesh Pichamani câu trả lời của là đơn giản và sạch sẽ nhất. Chỉ cần thêm vào khả năng của mình để đặt số ngày trước khi hết hạn:

EDIT: cũng đã thêm tùy chọn 'không bao giờ hết hạn' nếu không đặt số ngày

        function setCookie(key, value, days) {
            var expires = new Date();
            if (days) {
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
            } else {
                document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
            }
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }

Đặt cookie:

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 

Tôi biết có rất nhiều câu trả lời tuyệt vời. Thông thường, tôi chỉ cần đọc cookie và tôi không muốn tạo ra chi phí bằng cách tải thêm thư viện hoặc xác định chức năng.

Đây là cách đọc cookie trong một dòng javascript . Tôi tìm thấy câu trả lời trong bài viết trên blog của Guilherme Coleues :

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

Điều này đọc cookie có tên key, đẹp, sạch sẽ và đơn giản.

$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie