it-swarm.com.de

Wie erstelle und lese ich einen Wert aus einem Cookie?

Wie erstelle und lese ich einen Wert aus einem Cookie in JavaScript?

229

Hier finden Sie Funktionen, die Sie zum Erstellen und Abrufen von Cookies verwenden können.

var createCookie = 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();
    }
    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 "";
}
211

JQuery-Cookies

oder einfaches 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);
      }
   }
}
39
Paul McCowat

Minimalistischer und voll ausgestatteter ES6-Ansatz:

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

Mozilla bietet ein einfaches Framework zum Lesen und Schreiben von Cookies mit vollständiger Unicode-Unterstützung und Beispielen zur Verwendung.

Sobald Sie auf der Seite enthalten sind, können Sie ein Cookie setzen:

docCookies.setItem(name, value);

einen Cookie lesen:

docCookies.getItem(name);

oder ein Cookie löschen:

docCookies.removeItem(name);

Zum Beispiel:

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

Weitere Beispiele und Details finden Sie auf Mozillas document.cookie-Seite .

14
Brendan Nee

Ich habe bereits viele Male die akzeptierte Antwort dieses Threads verwendet. Es ist ein tolles Stück Code: Einfach und benutzbar. Normalerweise verwende ich babel und ES6 und Module. Wenn Sie also wie ich sind, ist hier der zu kopierende Code, um mit ES6 schneller zu entwickeln

Akzeptierte Antwort als Modul mit ES6 umgeschrieben:

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

Und danach können Sie es einfach als beliebiges Modul importieren (Pfad kann natürlich variieren):

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

Für diejenigen, die Sicherungsobjekte wie {foo: 'bar'} benötigen, teile ich meine bearbeitete Version von @ KevinBurkes Antwort. Ich habe JSON.stringify und JSON.parse hinzugefügt, das ist alles.

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

}

So können Sie jetzt folgende Dinge tun:

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

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

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

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

Hier ist ein Code zum Holen, Setzen und Löschen von Cookies in 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);
}

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

4
Shubham Kumar

ES7, mit Regex für get (). Basierend auf 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)

Verwendung - Cookie.get (Name, Wert [ Optionen]):
options unterstützt alle Standard-Cookie-Optionen und fügt "days" hinzu: 

  • path: '/' - beliebiger absoluter Pfad. Standard: aktueller Dokumentstandort 
  • domain: 'sub.example.com' - beginnt möglicherweise nicht mit Punkt. Standard: aktueller Host ohne Subdomain.
  • secure: true - Cookie nur über https ausgeben. Standard: falsch.
  • tage: 2 tage bis der cookie abläuft. Standard: Ende der Sitzung.
    Alternative Möglichkeiten zum Festlegen des Ablaufs:
    • verfällt: 'So, 18 Feb 2018 16:23:42 GMT' - Datum des Ablaufs als GMT-Zeichenfolge.
      Das aktuelle Datum kann abgerufen werden mit: new Date (Date.now ()). ToUTCString ()
    • 'max-age': 30 - wie Tage, aber in Sekunden statt Tagen.

Andere Antworten verwenden "expires" anstelle von "max-age", um ältere IE - Versionen zu unterstützen. Diese Methode erfordert ES7, IE7 ist also sowieso out (das ist keine große Sache).

Hinweis: Komische Zeichen wie "=" und "{:}" werden als Cookie-Werte unterstützt, und der reguläre Ausdruck behandelt führende und nachgestellte Leerzeichen (von anderen Bibliotheken).
Wenn Sie Objekte speichern möchten, codieren Sie diese entweder vor und nach und mit JSON.stringify und JSON.parse, bearbeiten Sie das obige oder fügen Sie eine andere Methode hinzu. Z.B:

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

Ich benutze dieses Objekt. Die Werte sind verschlüsselt, daher ist es beim Lesen oder Schreiben auf der Serverseite erforderlich, dies zu berücksichtigen.

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

})();
2
sinuhepop

Einfaches Lesen von Cookies in 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
naamadheya

Sie können mein Cookie ES-Modul zum Abrufen/Setzen/Entfernen von Cookies verwenden.

Verwendungszweck:

Fügen Sie in Ihr Head-Tag den folgenden Code ein:

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

oder

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

Jetzt können Sie window.cookie verwenden, um Benutzerinformationen auf Webseiten zu speichern.

cookie.isEnabled ()

Ist das Cookie in Ihrem Webbrowser aktiviert?

returns {boolean} true if cookie enabled.

Beispiel

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

cookie.set (name, wert)

Setzen Sie ein Cookie.

name: cookie name.
value: cookie value.

Beispiel

cookie.set('age', 25);

cookie.get (name [ defaultValue]);

hol dir einen Keks.

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

Cookie entfernen.

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

Anwendungsbeispiel

0
Andrej

Ich habe js-cookie zum Erfolg benutzt.

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