Çerezden nasıl değer oluşturabilirim ve okuyabilirim?

JavaScript'te bir çerezden nasıl değer oluşturabilir ve okuyabilirim?

Tanımlama bilgileri oluşturmak ve almak için kullanabileceğiniz işlevler şunlardır.

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

Minimalist ve tam özellikli ES6 yaklaşımı:

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

JQuery Çerezleri

veya düz Javascript:

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, nasıl kullanılacağına dair örneklerle birlikte tam unicode desteğiyle çerezleri okumak ve yazmak için basit bir çerçeve sağlar .

Sayfaya eklendikten sonra bir çerez ayarlayabilirsiniz:

docCookies.setItem(name, value);

bir çerez okuyun:

docCookies.getItem(name);

veya bir çerezi silin:

docCookies.removeItem(name);

Örneğin:

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

Mozilla'nın document.cookie sayfasındaki diğer örneklere ve ayrıntılara bakın .

Bu basit js dosyasının bir sürümü github'da .

ES7, get () için bir normal ifade kullanarak. MDN tabanlı

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)

Kullanım - Cookie.get (ad, değer [, seçenekler]):
seçenekler tüm standart çerez seçeneklerini destekler ve "günler" ekler:

• path : '/' - herhangi bir mutlak yol. Varsayılan : geçerli belge konumu,
• domain : 'sub.example.com' - nokta ile başlayamaz. Varsayılan : alt etki alanı olmayan geçerli ana bilgisayar.
• secure : true - Çerezi yalnızca https üzerinden sunun. Varsayılan : yanlış.
• gün : Çerezin süresi dolana kadar 2 gün. Varsayılan : Oturum sonu.
  Son kullanma tarihini ayarlamanın alternatif yolları:
  • sona : 'Güneş, 18 Şubat 2018 16:23:42 GMT' - Bir GMT dizesi olarak son kullanma tarihi.
    Şu anki tarih ile alınabilir: new Date (Date.now ()). ToUTCString ()
  • 'max-age' : 30 - günlerle aynı, ancak gün yerine saniye olarak.

Diğer yanıtlar eski IE sürümlerini desteklemek için "maks. Yaş" yerine "geçerlilik süresi" kullanmaktadır. Bu yöntem ES7 gerektirir, bu yüzden IE7 zaten dışarıda (bu büyük bir anlaşma değil).

Not: "=" ve "{:}" gibi komik karakterler çerez değerleri olarak desteklenir ve normal ifade boşluk ve sondaki boşlukları (diğer kütüphanelerden) işler.
Nesneleri saklamak istiyorsanız, bunları önce ve sonra ve JSON.stringify ve JSON.parse ile kodlayın, yukarıdakileri düzenleyin veya başka bir yöntem ekleyin. Örneğin:

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

{Foo: 'bar'} gibi nesneleri kaydetmek isteyenler için, @ KevinBurke'nin cevabının düzenlenmiş versiyonunu paylaşıyorum. JSON.stringify ve JSON.parse ekledim, hepsi bu.

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

}

Yani, şimdi böyle şeyler yapabilirsiniz:

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

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

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

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

Bu konunun kabul edilmiş cevabını birçok kez kullandım. Harika bir kod parçası: Basit ve kullanışlı. Ama genellikle babel ve ES6 ve modülleri kullanıyorum, bu yüzden benim gibi iseniz, ES6 ile daha hızlı gelişmek için kopyalanacak kod

Kabul edilen cevap ES6 ile modül olarak yeniden yazılır:

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

Ve bundan sonra herhangi bir modül olarak içe aktarabilirsiniz (elbette yol değişebilir):

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

İşte JavaScript'te Çerez Almak, Ayarlamak ve Silmek için bir kod .

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

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

Bu nesneyi kullanıyorum. Değerler kodlanmıştır, bu nedenle sunucu tarafından okurken veya yazarken dikkate alınması gerekir.

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

})();

ES6'daki çerezleri okumak için basit bir yol.

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

Kullandığım js-cookie başarısı için.

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

Tanımlama bilgisi almak / ayarlamak / kaldırmak için tanımlama bilgisi ES modülümü kullanabilirsiniz .

Kullanımı:

Kafa etiketinize aşağıdaki kodu ekleyin:

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

veya

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

Artık web sayfalarında kullanıcı bilgilerini saklamak için window.cookie'yi kullanabilirsiniz.

cookie.isEnabled ()

Web tarayıcınızda çerez etkin mi?

returns {boolean} true if cookie enabled.

Misal

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

cookie.set (ad; değer)

Bir çerez ayarlayın.

name: cookie name.
value: cookie value.

Misal

cookie.set('age', 25);

cookie.get (ad [, varsayılanDeğer]);

kurabiye al.

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.remove (ad);

Çerezi kaldır.

name: cookie name.

cookie.remove( 'age' );

Kullanım örneği

ReadCookie'nin geliştirilmiş bir sürümü:

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

Bu, çerez değerinizi bulduğunuz anda kırılmalı ve değerini döndürmelidir. Bence çift bölme ile çok zarif.

If-koşulundaki değiştirme, doğru bir şekilde eşleştiğinden emin olmak için bir beyaz boşluk trimidir

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

Basit cookieUtils yazdım, bu çerez oluşturmak, çerez okumak ve çerez silmek için üç işlevi vardır.

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

Burada belirtilen w3chools örneğidir .

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

Basit bir okuma

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

Çerezleri arsız ve basit bir şekilde okumak şöyle olabilir:

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

Eğer çerez gibi bir şey içeriyorsa biliyorsanız bu kullanılabilir: username="John Doe"; id=123;. Bir dizenin çerezde tırnak işaretleri gerektirdiğini unutmayın. Muhtemelen önerilen yol değildir, ancak test / öğrenme için çalışır.