Wie erstelle und lese ich einen Wert aus einem Cookie?

Wie kann ich einen Wert aus einem Cookie in JavaScript erstellen und lesen?

Hier sind Funktionen, mit denen Sie Cookies erstellen und abrufen können.

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

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

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

Mozilla bietet ein einfaches Framework zum Lesen und Schreiben von Cookies mit vollständiger Unicode-Unterstützung sowie Beispiele für deren Verwendung.

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

docCookies.setItem(name, value);

Cookie lesen:

docCookies.getItem(name);

oder löschen Sie ein Cookie:

docCookies.removeItem(name);

Beispielsweise:

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

Eine Version dieser einfachen JS-Datei befindet sich auf Github .

ES7 mit einem regulären Ausdruck 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]):
Optionen unterstützt alle Standard-Cookie-Optionen und fügt "Tage" hinzu:

• Pfad : '/' - jeder absolute Pfad. Standard : aktueller Dokumentspeicherort,
• domain : 'sub.example.com' - darf nicht mit dot beginnen. Standard : aktueller Host ohne Subdomain.
• sicher : wahr - Cookie nur über https bereitstellen. Standard : false.
• Tage : 2 Tage bis zum Ablauf des Cookies. Standard : Sitzungsende.
  Alternative Möglichkeiten zum Festlegen des Ablaufs:
  • läuft ab : 'So, 18. Februar 2018 16:23:42 GMT' - Ablaufdatum 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, daher ist IE7 sowieso nicht verfügbar (dies ist keine große Sache).

Hinweis: Lustige Zeichen wie "=" und "{:}" werden als Cookie-Werte unterstützt, und der reguläre Ausdruck verarbeitet führende und nachfolgende Leerzeichen (aus anderen Bibliotheken).
Wenn Sie Objekte speichern möchten, codieren Sie sie entweder vorher und nachher mit und JSON.stringify und JSON.parse, bearbeiten Sie die obigen Informationen 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);

Für diejenigen, die Objekte wie {foo: 'bar'} speichern müssen, teile ich meine bearbeitete Version der Antwort von @ KevinBurke. 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;
    }

}

Jetzt können Sie Folgendes 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'

Ich habe die akzeptierte Antwort dieses Threads bereits viele Male verwendet. Es ist ein großartiger Code: Einfach und benutzerfreundlich. Normalerweise verwende ich jedoch Babel, ES6 und Module. Wenn Sie also wie ich sind, finden Sie hier Code zum Kopieren, um die Entwicklung mit ES6 zu beschleunigen

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

Hier ist ein Code zum Abrufen, 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/

Ich benutze dieses Objekt. Die Werte sind codiert, daher muss sie beim Lesen oder Schreiben von der Serverseite berücksichtigt werden.

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

})();

Einfache Möglichkeit, Cookies in ES6 zu lesen.

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

Ich habe js-cookie zum Erfolg verwendet.

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

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 einen Cookie.

name: cookie name.
value: cookie value.

Beispiel

cookie.set('age', 25);

cookie.get (name [, defaultValue]);

Holen Sie sich 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

Eine verbesserte Version des readCookie:

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

Dies sollte unterbrochen werden, sobald Sie Ihren Cookie-Wert gefunden und dessen Wert zurückgegeben haben. Meiner Meinung nach sehr elegant mit dem Double Split.

Das Ersetzen bei der if-Bedingung ist eine Leerraumverkleidung, um sicherzustellen, dass sie korrekt übereinstimmt

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

Ich habe einfache cookieUtils geschrieben, es hat drei Funktionen zum Erstellen des Cookies, Lesen des Cookies und Löschen des Cookies.

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

Hier ist das erwähnte Beispiel von w3chools .

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

Eine einfache Lektüre

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

Eine freche und einfache Art, einen Cookie zu lesen, könnte so etwas sein wie:

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

Dies kann verwendet werden, wenn Sie wissen, dass Ihr Cookie Folgendes enthält : username="John Doe"; id=123;. Beachten Sie, dass für eine Zeichenfolge Anführungszeichen im Cookie erforderlich sind. Wahrscheinlich nicht der empfohlene Weg, funktioniert aber zum Testen / Lernen.