Bagaimana cara saya membuat dan membaca nilai dari cookie?

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

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

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

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

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 .

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

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'

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

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/

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

})();

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

Saya telah menggunakan js-cookie untuk sukses.

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

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

var age = cookie.get('age', 25);

cookie.hapus (nama);

Hapus cookie.

name: cookie name.

cookie.remove( 'age' );

Contoh penggunaan

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

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

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

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

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

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.