Bagaimana cara saya membuat dan membaca nilai dari cookie?


274

Bagaimana saya bisa membuat dan membaca nilai dari cookie di JavaScript?



FWIW, js-cookie menyediakan API yang sangat baik untuk menanganinya.
Fagner Brack

Anda dapat memeriksa panduan ini pada Cookie JavaScript .
Shubham Kumar

Jangan lupa bahwa API Penyimpanan Web , bisa menjadi alternatif yang baik untuk cookie dalam beberapa situasi.
MattBianco

Jawaban:


234

Berikut adalah fungsi yang dapat Anda gunakan untuk membuat dan mengambil cookie.

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 = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

23
Ini tidak berfungsi jika nilai cookie Anda mengandung apa pun yang tidak menyandikan / mendekode dengan baik. Yang ada di w3schools tampaknya bekerja dengan sangat baik
Richard Rout

13
Wrapper sederhana dari Mozilla ini juga memiliki dukungan unicode yang eksplisit
Brad Parks

4
@BradParks Sayang sekali dirilis di GPL.
jahu

1
Ini tidak akan berfungsi pada IE8 atau 9 jika cookie tidak memiliki nilai, karena IE tidak menambahkan tanda sama dengan ( = ) setelah nama cookie. Apa yang kami lakukan adalah memeriksa apakah indexOf ("=") == - 1 , dan jika demikian gunakan seluruh cookie sebagai nama cookie.
Mohoch

@jahu Dan saya akan mengatakan itu juga dalam domain publik: developer.mozilla.org/en-US/docs/MDN/…
Chronial

52

Pendekatan ES6 minimalis dan berfitur lengkap:

const setCookie = (name, value, days = 7, path = '/') => {
  const expires = new Date(Date.now() + days * 864e5).toUTCString()
  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}

const getCookie = (name) => {
  return document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=')
    return parts[0] === name ? decodeURIComponent(parts[1]) : r
  }, '')
}

const deleteCookie = (name, path) => {
  setCookie(name, '', -1, path)
}

2
toGMTString()sudah usang, gunakan toUTCString()saja.
Thanh Nguyen

@NguyenThanh Thx! Diperbarui
artnikpro

1
Terkadang nilai cookie itu sendiri mungkin mengandung =tanda. Dalam hal ini fungsi getCookieakan menghasilkan hasil yang tidak terduga. Untuk menghindari itu, pertimbangkan untuk menggunakan fungsi panah di bawah tubuhconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
Dmitriy Zhura

Akan lebih baik untuk memiliki opsi untuk membiarkan tanggal kedaluwarsa tidak disetel. Ini akan memungkinkan cookie dihapus secara otomatis saat browser keluar.
xji

4
864e5 = 86400000 = 1000*60*60*24mewakili jumlah milidetik dalam 24 jam sehari.
Henrikh Kantuni

41

Cookie JQuery

atau Javascript biasa:

function setCookie(c_name,value,exdays)
{
   var exdate=new Date();
   exdate.setDate(exdate.getDate() + exdays);
   var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
   document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
   var i,x,y,ARRcookies=document.cookie.split(";");
   for (i=0; i<ARRcookies.length; i++)
   {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
      {
        return unescape(y);
      }
   }
}

1
Saya menandai ini terutama karena Anda menyebutkan JQuery Cookies. Saya akan merekomendasikan itu. Kode ini sangat kecil dan jika Anda sudah menggunakan JQuery, itu hanya hal yang benar untuk digunakan.
w0rp

17

Mozilla menyediakan kerangka kerja sederhana untuk membaca dan menulis cookie dengan dukungan unicode penuh bersama dengan contoh bagaimana menggunakannya.

Setelah dimasukkan pada halaman, Anda dapat mengatur cookie:

docCookies.setItem(name, value);

baca cookie:

docCookies.getItem(name);

atau hapus cookie:

docCookies.removeItem(name);

Sebagai contoh:

// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');

// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');

// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');

Lihat lebih banyak contoh dan detail di halaman document.cookie Mozilla .

Versi file js sederhana ini ada di github .


2
Harap dicatat bahwa perpustakaan cookie yang disediakan di MDN dirilis di bawah GPL, bukan LGPL.
Semua Pekerja Sangat Penting

File javascript apa yang harus saya impor? Tidak dapat menemukannya :(
AlikElzin-kilaka

Lihat bagian di bawah "Perpustakaan" di halaman ini: developer.mozilla.org/en-US/docs/Web/API/document/… - Anda dapat menyimpannya ke file dan memasukkannya atau menempelkannya ke file js yang ada di mana Anda ingin menggunakannya.
Brendan Nee

Jadi tidak ada file javascript mandiri? Jadi itu adalah potongan kode - bukan perpustakaan yang sebenarnya.
AlikElzin-kilaka

Masukan yang bagus! "Library" adalah file .js tunggal dengan ~ 80 baris; ini file ini (di GitHub): github.com/madmurphy/cookies.js/blob/master/cookies.js
Philipp

8

ES7, menggunakan regex untuk get (). Berdasarkan MDN

const Cookie =
    { get: name => {
        let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
        if (c) return decodeURIComponent(c)
        }
    , set: (name, value, opts = {}) => { 
        if (opts.days) { 
            opts['max-age'] = opts.days * 60 * 60 * 24; 
            delete opts.days 
            }
        opts = Object.entries(opts).reduce((str, [k, v]) => `${str}; ${k}=${v}`, '')
        document.cookie = name + '=' + encodeURIComponent(value) + opts
        }
    , delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts}) 
    // path & domain must match cookie being deleted 
    }

Cookie.set('user', 'Jim', {path: '/', days: 10}) 
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)

Penggunaan - Cookie.get (nama, nilai [, opsi]):
opsi mendukung semua opsi cookie standar dan menambahkan "hari":

  • path : '/' - setiap path absolut. Default : lokasi dokumen saat ini,
  • domain : 'sub.example.com' - mungkin tidak dimulai dengan titik. Default : host saat ini tanpa subdomain.
  • secure : true - Hanya melayani cookie di atas https. Default : false
  • hari : 2 - hari sampai cookie kedaluwarsa. Default : Akhir sesi.
    Cara alternatif mengatur kedaluwarsa:
    • kedaluwarsa : 'Sun, 18 Feb 2018 16:23:42 GMT' - tanggal kedaluwarsa sebagai string GMT.
      Tanggal saat ini dapat diperoleh dengan: Tanggal baru (Date.now ()). ToUTCString ()
    • 'usia maks' : 30 - sama seperti hari, tetapi dalam detik, bukan hari.

Jawaban lain menggunakan "kedaluwarsa" alih-alih "usia maks" untuk mendukung versi IE yang lebih lama. Metode ini membutuhkan ES7, jadi IE7 tidak aktif (ini bukan masalah besar).

Catatan: Karakter lucu seperti "=" dan "{:}" didukung sebagai nilai cookie, dan regex menangani spasi spasi awal dan akhir (dari lib lainnya).
Jika Anda ingin menyimpan objek, enkode mereka sebelum dan sesudah dengan dan JSON.stringify dan JSON.parse, edit di atas, atau tambahkan metode lain. Misalnya:

Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);

Akankah para downvoters dengan baik hati menjelaskan apa yang salah dengan metode saya?
SamGoody

1
1. Lebih pendek, dan IMO lebih mudah dirawat. 2. Lebih lengkap (adalah satu-satunya jawaban untuk menerima aman, urutan argumen apa pun, maks-usia). 3. Lebih banyak standar standar (path dll standar ke standar, tidak seperti kebanyakan jawaban di sini). 4. Praktik terbaik (menurut MDN, regex adalah cara yang paling dapat diandalkan untuk mengekstraksi nilai-nilai). 5. Futureprook (jika lebih banyak opsi ditambahkan ke cookie, mereka akan dipertahankan). 6. Satu objek mencemari kode kurang dari banyak fungsi. 7. Dapatkan, atur, dan hapus dan mudah untuk menambahkan lebih banyak metode. 8. ES7 (kata kunci yang enak).
SamGoody

7

Bagi mereka yang perlu menyimpan objek seperti {foo: 'bar'}, saya membagikan jawaban @ KevinBurke versi saya yang telah diedit. Saya telah menambahkan JSON.stringify dan JSON.parse, itu saja.

cookie = {

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

    get : function(name){
        var nameEQ = name + "=",
            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  JSON.parse(c.substring(nameEQ.length,c.length));
        }

        return null;
    }

}

Jadi, sekarang Anda dapat melakukan hal-hal seperti ini:

cookie.set('cookie_key', {foo: 'bar'}, 30);

cookie.get('cookie_key'); // {foo: 'bar'}

cookie.set('cookie_key', 'baz', 30);

cookie.get('cookie_key'); // 'baz'

5

Saya sudah menggunakan jawaban yang diterima untuk utas ini berkali-kali. Ini adalah kode yang luar biasa: Sederhana dan dapat digunakan. Tapi saya biasanya menggunakan babel dan ES6 dan modul, jadi jika Anda seperti saya, berikut adalah kode untuk menyalin agar lebih cepat berkembang dengan ES6

Jawaban yang diterima ditulis ulang sebagai modul dengan ES6:

export const createCookie = ({name, value, days}) => {
  let expires;
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toGMTString();
  } else {
    expires = '';
  }
  document.cookie = name + '=' + value + expires + '; path=/';
};

export const getCookie = ({name}) => {
  if (document.cookie.length > 0) {
    let c_start = document.cookie.indexOf(name + '=');
    if (c_start !== -1) {
      c_start = c_start + name.length + 1;
      let c_end = document.cookie.indexOf(';', c_start);
      if (c_end === -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return '';
};

Dan setelah ini, Anda cukup mengimpornya sebagai modul apa saja (jalurnya dapat bervariasi):

import {createCookie, getCookie} from './../helpers/Cookie';

5

Berikut kode untuk Mendapatkan, Mengatur, dan Menghapus Cookie dalam JavaScript .

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

function setCookie(name, value, expirydays) {
 var d = new Date();
 d.setTime(d.getTime() + (expirydays*24*60*60*1000));
 var expires = "expires="+ d.toUTCString();
 document.cookie = name + "=" + value + "; " + expires;
}

function deleteCookie(name){
  setCookie(name,"",-1);
}

Sumber: http://mycodingtricks.com/snippets/javascript/javascript-cookies/


2

Saya menggunakan objek ini. Nilai dikodekan, jadi perlu untuk mempertimbangkannya saat membaca atau menulis dari sisi server.

cookie = (function() {

/**
 * Sets a cookie value. seconds parameter is optional
 */
var set = function(name, value, seconds) {
    var expires = seconds ? '; expires=' + new Date(new Date().getTime() + seconds * 1000).toGMTString() : '';
    document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
};

var map = function() {
    var map = {};
    var kvs = document.cookie.split('; ');
    for (var i = 0; i < kvs.length; i++) {
        var kv = kvs[i].split('=');
        map[kv[0]] = decodeURIComponent(kv[1]);
    }
    return map;
};

var get = function(name) {
    return map()[name];
};

var remove = function(name) {
    set(name, '', -1);
};

return {
    set: set,
    get: get,
    remove: remove,
    map: map
};

})();

0

Cara sederhana untuk membaca cookie di ES6.

function getCookies() {
    var cookies = {};
    for (let cookie of document.cookie.split('; ')) {
        let [name, value] = cookie.split("=");
        cookies[name] = decodeURIComponent(value);
    }
    console.dir(cookies);
}

0

Saya telah menggunakan js-cookie untuk sukses.

<script src="/path/to/js.cookie.js"></script>
<script>
  Cookies.set('foo', 'bar');
  Cookies.get('foo');
</script>

0

Anda dapat menggunakan modul ES cookie saya untuk mendapatkan / mengatur / menghapus cookie.

Pemakaian:

Di tag kepala Anda, sertakan kode berikut:

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>

atau

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>

Sekarang Anda dapat menggunakan window.cookie untuk menyimpan informasi pengguna di halaman web.

cookie.isEnabled ()

Apakah cookie diaktifkan di browser web Anda?

returns {boolean} true if cookie enabled.

Contoh

if ( cookie.isEnabled() )
    console.log('cookie is enabled on your browser');
else
    console.error('cookie is disabled on your browser');

cookie.set (nama, nilai)

Tetapkan cookie.

name: cookie name.
value: cookie value.

Contoh

cookie.set('age', 25);

cookie.get (nama [, nilai bawaan]);

dapatkan kue.

name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Contoh
var age = cookie.get('age', 25);

cookie.hapus (nama);

Hapus cookie.

name: cookie name.
Contoh
cookie.remove( 'age' );

Contoh penggunaan


-1

Versi readCookie yang ditingkatkan:

function readCookie( name )
{
    var cookieParts = document.cookie.split( ';' )
    ,   i           = 0
    ,   part
    ,   part_data
    ,   value
    ;

    while( part = cookieParts[ i++ ] )
    {
        part_data = part.split( '=' );

        if ( part_data.shift().replace(/\s/, '' ) === name )
        {
            value = part_data.shift();
            break;
        }

    }
    return value;
}

Ini akan hancur segera setelah Anda menemukan nilai cookie Anda dan mengembalikan nilainya. Menurut saya sangat elegan dengan double split.

Pengganti pada kondisi jika adalah trim spasi putih, untuk memastikan itu cocok dengan benar


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

function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

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

-1

Saya telah menulis cookieUtils sederhana, ia memiliki tiga fungsi untuk membuat cookie, membaca cookie, dan menghapus cookie.

var CookieUtils = {
    createCookie: function (name, value, expireTime) {
        expireTime = !!expireTime ? expireTime : (15 * 60 * 1000); // Default 15 min
        var date = new Date();
        date.setTime(date.getTime() + expireTime);
        var expires = "; expires=" + date.toGMTString();
        document.cookie = name + "=" + value + expires + "; path=/";
    },
    getCookie: function (name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) {
            return parts.pop().split(";").shift();
        }
    },
    deleteCookie: function(name) {
        document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
};

-1

Berikut adalah contoh dari sekolah - sekolah w3 yang disebutkan.

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

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

-1

Bacaan sederhana

var getCookie = function (name) {
    var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
    var valueEnd = document.cookie.indexOf(";", valueStart); 
    return document.cookie.slice(valueStart, valueEnd)
}

-2

Cara membaca cookie yang kurang ajar dan sederhana bisa seperti:

let username, id; 
eval(document.cookie); 
console.log(username + ", " + id); // John Doe, 123

Ini bisa digunakan jika Anda tahu cookie Anda berisi sesuatu seperti: username="John Doe"; id=123;. Perhatikan bahwa string membutuhkan kutipan dalam cookie. Mungkin bukan cara yang disarankan, tetapi bekerja untuk pengujian / pembelajaran.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.