Bagaimana cara saya mengatur / membatalkan pengaturan cookie dengan jQuery?

1244

Bagaimana cara saya mengatur dan menghapus cookie menggunakan jQuery, misalnya membuat cookie bernama testdan mengatur nilainya 1?

Oh Tuhan
sumber

Jawaban:

1767

Perbarui April 2019

jQuery tidak diperlukan untuk membaca / memanipulasi cookie, jadi jangan gunakan jawaban asli di bawah ini.

Buka https://github.com/js-cookie/js-cookie sebagai gantinya, dan gunakan perpustakaan di sana yang tidak bergantung pada jQuery.

Contoh dasar:

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

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

Lihat dokumen di github untuk detailnya.


Lihat plugin:

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

Anda kemudian dapat melakukan:

$.cookie("test", 1);

Untuk menghapus:

$.removeCookie("test");

Selain itu, untuk menetapkan batas waktu beberapa hari (10 di sini) pada cookie:

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

Jika opsi kedaluwarsa dihilangkan, maka cookie menjadi cookie sesi dan dihapus ketika browser keluar.

Untuk mencakup semua opsi:

$.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).
});

Untuk membaca kembali nilai cookie:

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

Anda mungkin ingin menentukan parameter path jika cookie dibuat pada path yang berbeda dengan yang sekarang:

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

UPDATE (April 2015):

Sebagaimana dinyatakan dalam komentar di bawah, tim yang bekerja pada plugin asli telah menghapus ketergantungan jQuery dalam proyek baru ( https://github.com/js-cookie/js-cookie ) yang memiliki fungsi dan sintaksis umum yang sama dengan versi jQuery. Tampaknya plugin asli tidak ke mana-mana.

Alistair Evans
sumber
1
dari changelog: "$ .removeCookie ('foo') untuk menghapus cookie, menggunakan $ .cookie ('foo', null) sekarang tidak digunakan lagi"
bogdan
68
@Kazar Saya menghabiskan 6 jam, tanpa istirahat. Saya akhirnya menyadari masalahnya pagi ini. Saya menggunakan ini dengan phonegap, di situs ini berfungsi tanpa masalah, tetapi pada perangkat, ketika Anda mencoba untuk mengambil cookie yang memiliki JSON, itu sudah menjadi objek, jadi jika Anda mencoba untuk JSON.parse itu, itu akan memberikan kesalahan parse JSON. Memecahkannya dengan "if typeof x == 'string'" lakukan JSON.parse, kalau tidak, cukup gunakan objek. 6 jam sialan mencari kesalahan di semua tempat yang salah
Andrei Cristian Prodan
10
saat menghapus cookie, pastikan juga mengatur lintasan ke lintasan yang sama dengan yang Anda setel pada awalnya:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar
30
Ini tahun 2015 dan kami masih menerima lebih dari 2 ribu hit unik per minggu di repositori jquery-cookie hanya dari jawaban ini. Beberapa hal yang dapat kita pelajari dari itu: 1. cookie tidak akan segera mati dan 2. Orang masih mencari "plugin jquery untuk menyelamatkan dunia". jQuery TIDAK diperlukan untuk menangani cookie, jquery-cookie diubah namanya menjadi js-cookie ( github.com/js-cookie/js-cookie ) dan ketergantungan jquery dibuat opsional di versi 1.5.0. Akan ada versi 2.0.0 dengan banyak hal menarik, ada baiknya lihat dan berkontribusi, thx!
Fagner Brack
2
@Kazar Kami tidak berencana untuk memindahkannya secara fisik, ada cukup banyak lalu lintas keseluruhan ke URL dari beberapa sumber dan Klaus adalah pemilik bersejarah namespace "jquery-cookie". Tidak perlu khawatir URL itu hilang dalam waktu dekat. Tapi tetap saja, saya akan mendorong semua orang untuk mulai menonton repositori baru untuk pembaruan.
Fagner Brack
429

Tidak perlu menggunakan jQuery terutama untuk memanipulasi cookie.

Dari QuirksMode (termasuk karakter melarikan diri)

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);
}

Melihat

Russ Cam
sumber
2
Hai Russ, hal yang baik tentang cookie jquery adalah bahwa ia lolos dari data
Svetoslav Marinov
2
@lordspace - Hanya membungkus nilai dalam window.escape / unescape untuk masing-masing menulis / mengambil nilai cookie :)
Russ Cam
46
Kode cookie yang lebih baik dapat ditemukan di sini: developer.mozilla.org/en/DOM/document.cookie
SDC
3
plugin cookie jQuery jauh lebih sederhana
brauliobo
1
alih-alih melarikan diri atau menghapus
lanskap,
143
<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>

Anda dapat mengatur cookie sebagai seperti

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

Anda bisa mendapatkan cookie seperti itu

getCookie('test');

Dan akhirnya Anda dapat menghapus cookie seperti ini

eraseCookie('test');

Semoga ini bisa membantu seseorang :)

EDIT:

Jika Anda ingin mengatur cookie ke semua path / halaman / direktori lalu setel atribut path ke 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();
}

Terima kasih, vicky

Vignesh Pichamani
sumber
1
60 * 1000 = 60 detik 60 * (60 * 1000) = 60 menit yaitu 1 jam 24 * (60 * (60 * 1000)) = 1 hari yang 24 jam Semoga bermanfaat.
Vignesh Pichamani
1
1 * 24 * 60 * 60 * 1000 menyesuaikan 1 untuk 1 hari atau Anda dapat melakukan 365
Vignesh Pichamani
1
Fungsi bagus ... Tapi mengapa mereka berada di dalam dokumen. Sudah ada tag?
DSS
1
Ini tidak akan bekerja di Safari atau IE untuk setiap karakter di luar jangkauan ASCII, seperti é, , dll Juga, ini tidak akan bekerja untuk beberapa karakter khusus yang tidak diperbolehkan dalam cookie-nama atau cookie-nilai. Saya merekomendasikan referensi berikut: tools.ietf.org/html/rfc6265
Fagner Brack
18

Anda dapat menggunakan plugin yang tersedia di sini ..

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

dan kemudian menulis cookie lakukan $.cookie("test", 1);

untuk mengakses cookie yang diatur lakukan $.cookie("test");

Divyesh Kanzariya
sumber
3
ada versi yang lebih baru dari plugin itu
Andrei Cristian Prodan
13

Berikut adalah modul global yang saya gunakan -

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);
    }

};
seanjacob
sumber
10

Pastikan untuk tidak melakukan hal seperti ini:

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

Kemudian, jika cookie tidak ada, debugger akan mengembalikan beberapa pesan tidak membantu seperti ".cookie not a function".

Selalu deklarasikan dulu, lalu lakukan split setelah memeriksa nol. Seperti ini:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");
pengguna890332
sumber
Kode sampel tidak lengkap. Apakah hanya satu }yang hilang atau ada beberapa baris kode yang hilang?
Peter Mortensen
Itu hanya hangus} hilang, tetapi jelas Anda perlu menambahkan lebih banyak baris kode untuk melanjutkan apa yang ingin Anda lakukan dengan split.
user890332
8

Inilah cara Anda mengatur cookie dengan JavaScript:

kode di bawah ini telah diambil dari 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=/";
}

sekarang Anda bisa mendapatkan cookie dengan fungsi di bawah ini:

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 "";
}

Dan akhirnya begini caranya Anda memeriksa 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);
        }
    }
}

Jika Anda ingin menghapus cookie, cukup atur parameter kedaluwarsa ke tanggal yang berlalu:

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

Contoh sederhana cookie yang disetel di browser Anda:

<!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>

Sederhana cukup salin / tempel dan gunakan kode ini untuk mengatur cookie Anda.

Webpixstudio
sumber
1
Sekedar catatan, browser secara default cache sumber sesuai dengan nama file mereka. Dalam contoh ini, jquery-1.9.0.min.jsakan dimuat ulang untuk semua orang ketika nama file diperbarui jquery-1.9.1.min.js, jika tidak, browser TIDAK akan membuat permintaan ke server sama sekali untuk memeriksa konten yang diperbarui. Jika Anda memperbarui kode di dalamnya jquery.cookie.jstanpa mengubah nama file, maka kode itu TIDAK dapat dimuat ulang di peramban yang telah menembolok jquery.cookie.jssumber daya.
Fagner Brack
Jika Anda menulis situs web dan menyalin / menempel ini, perlu diketahui bahwa ini tidak akan berfungsi jika Anda memperbarui jquery.cookie.jsversi tanpa mengubah nama file itu (kecuali server Anda berurusan dengan caching menggunakan E-Tags).
Fagner Brack
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // ketika memuat halaman di halaman berbeda tidak ditemukan $ ('# name'). teks (data [0]); $ ('# address'). teks (data [1]); }
Mohammad Javad
5

Anda dapat menggunakan perpustakaan di situs web Mozilla di sini

Anda dapat mengatur dan mendapatkan cookie seperti ini

docCookies.setItem(name, value);
docCookies.getItem(name);
Moustafa Samir
sumber
3

Saya pikir Fresher memberi kami cara yang baik, tetapi ada kesalahan:

    <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>

Anda harus menambahkan "nilai" di dekat getTime (); jika tidak, cookie akan segera kedaluwarsa :)

pelayan
sumber
2
"value" bisa berupa string. Dalam pertanyaannya dia menggunakan 1 sebagai contoh. Nilai harus sama dengan apa kunci tersebut, bukan panjangnya dalam beberapa hari sebelum cookie berakhir. Jika nilai diteruskan sebagai "foo", versi Anda akan macet.
Peter
1

Saya pikir Vignesh Pichamani adalah yang paling sederhana dan bersih. Hanya menambah kemampuannya untuk mengatur jumlah hari sebelum kedaluwarsa:

EDIT: juga menambahkan opsi 'tidak pernah kedaluwarsa' jika tidak ada nomor hari yang ditetapkan

        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;
        }

Atur cookie:

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

Saya tahu ada banyak jawaban bagus. Seringkali, saya hanya perlu membaca cookie dan saya tidak ingin membuat overhead dengan memuat perpustakaan tambahan atau mendefinisikan fungsi.

Berikut ini cara membaca cookie dalam satu baris javascript . Saya menemukan jawabannya di artikel blog Guilherme Rodrigues :

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

Ini membaca cookie bernama key, bagus, bersih dan sederhana.

Fabian
sumber
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Hasan Badshah
sumber