Jak utworzyć i odczytać wartość z pliku cookie?


274

Jak mogę utworzyć i odczytać wartość z pliku cookie w JavaScript?



FWIW, js-cookie zapewnia bardzo dobre API do obsługi tego.
Fagner Brack,

Możesz sprawdzić ten przewodnik w plikach cookie JavaScript .
Shubham Kumar

Nie zapominaj, że interfejs API Web Storage może być dobrą alternatywą dla plików cookie w niektórych sytuacjach.
MattBianco,

Odpowiedzi:


234

Oto funkcje, których możesz użyć do tworzenia i pobierania plików 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
To nie działa, jeśli wartość twojego pliku cookie zawiera coś, co nie koduje / dekoduje dobrze. Ten w w3schools wydaje się działać pięknie
Richard Rout

13
W tym prostym opakowaniu z Mozilli wspomniano także o wyraźnej obsłudze kodu Unicode
Brad Parks

4
@BradParks Szkoda, że ​​zostało wydane na GPL.
jahu

1
To nie będzie działać na IE8 lub 9, jeśli plik cookie nie ma wartości, ponieważ IE nie dodaje znaku równości ( = ) po nazwie pliku cookie. Co robimy, to sprawdzamy, czy indexOf ("=") == - 1 , a jeśli tak, użyj całego pliku cookie jako nazwy pliku cookie.
Mohoch

@jahu I powiedziałbym, że jest to również domena publiczna: developer.mozilla.org/en-US/docs/MDN/…
Chronial

51

Minimalistyczne iw pełni funkcjonalne podejście ES6:

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()jest przestarzałe, użyj toUTCString()zamiast niego.
Thanh Nguyen

@NguyenThanh Thx! Zaktualizowano
artnikpro 15.09.17

1
Czasami sama wartość pliku cookie może zawierać =znak. W takim przypadku funkcja getCookiewygeneruje nieoczekiwany wynik. Aby tego uniknąć, rozważ użycie następującej funkcji funkcji strzałki wewnątrz redukujconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
Dmitriy Zhura

Byłoby miło mieć możliwość pozostawienia daty ważności nie ustawionej. Umożliwiłoby to automatyczne usunięcie pliku cookie po wyjściu z przeglądarki.
Xji

4
864e5 = 86400000 = 1000*60*60*24oznacza liczbę milisekund w ciągu 24 godzin.
Henrikh Kantuni

41

Pliki cookie JQuery

lub zwykły 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);
      }
   }
}

1
Zaznaczam to przede wszystkim dlatego, że wspomniałeś o plikach cookie JQuery. Poleciłbym to. Kod jest bardzo mały i jeśli już używasz JQuery, to jest po prostu właściwa rzecz do użycia.
w0rp

17

Mozilla zapewnia prostą platformę do odczytu i zapisu plików cookie z pełną obsługą Unicode wraz z przykładami jej użycia.

Po umieszczeniu na stronie możesz ustawić plik cookie:

docCookies.setItem(name, value);

przeczytaj ciasteczko:

docCookies.getItem(name);

lub usuń plik cookie:

docCookies.removeItem(name);

Na przykład:

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

Zobacz więcej przykładów i szczegółów na stronie document.cookie Mozilli .

Wersja tego prostego pliku js znajduje się na github .


2
Należy pamiętać, że biblioteka plików cookie dostępna w MDN jest wydana na licencji GPL, a nie LGPL.
Wszyscy pracownicy są niezbędni

Jaki plik javascript muszę zaimportować? Nie można go znaleźć :(
AlikElzin-kilaka

Zobacz sekcję „Biblioteka” na tej stronie: developer.mozilla.org/en-US/docs/Web/API/document/… - możesz zapisać go do pliku i dołączyć lub wkleić do istniejącego pliku js, gdzie chcesz go użyć.
Brendan Nee,

Więc nie ma samodzielnego pliku javascript? Jest to fragment kodu - nie rzeczywista biblioteka.
AlikElzin-kilaka

Świetny wkład! „Biblioteka” to pojedynczy plik .js z ~ 80 wierszami; to ten plik (na GitHub): github.com/madmurphy/cookies.js/blob/master/cookies.js
Philipp

8

ES7, używając wyrażenia regularnego dla get (). Na podstawie 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)

Użycie - Cookie.get (nazwa, wartość [, opcje]):
opcje obsługuje wszystkie standardowe opcje plików cookie i dodaje „dni”:

  • ścieżka : „/” - dowolna ścieżka bezwzględna. Domyślnie : bieżąca lokalizacja dokumentu,
  • domena : „sub.example.com” - nie może zaczynać się od kropki. Domyślnie : bieżący host bez poddomeny.
  • secure : true - wyświetlaj pliki cookie tylko przez https. Domyślnie : false.
  • dni : 2 - dni do wygaśnięcia pliku cookie. Domyślnie : koniec sesji.
    Alternatywne sposoby ustawiania daty ważności:
    • wygasa : „niedz., 18 lutego 2018 16:23:42 GMT” - data wygaśnięcia jako ciąg GMT.
      Bieżącą datę można uzyskać za pomocą: nowej daty (Date.now ()). ToUTCString ()
    • „maksymalny wiek” : 30 - to samo co dni, ale w sekundach zamiast dniach.

Inne odpowiedzi używają „wygasa” zamiast „maksymalnego wieku” do obsługi starszych wersji IE. Ta metoda wymaga ES7, więc IE7 i tak nie działa (to nie jest wielka sprawa).

Uwaga: Zabawne znaki, takie jak „=” i „{:}” są obsługiwane jako wartości plików cookie, a wyrażenie regularne obsługuje początkowe i końcowe białe znaki (z innych bibliotek).
Jeśli chcesz przechowywać obiekty, albo zakoduj je przed i po za pomocą i JSON.stringify i JSON.parse, edytuj powyższe lub dodaj inną metodę. Na przykład:

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

Czy downvoters uprzejmie wyjaśnią, co jest nie tak z moją metodą?
SamGoody,

1
1. Krótszy i IMO łatwiejszy w utrzymaniu. 2. Bardziej kompletne (jest to jedyna odpowiedź, aby zaakceptować bezpieczny, dowolny porządek argumentów, maksymalny wiek). 3. Więcej standardowych wartości domyślnych (domyślnie ścieżka itp.), W przeciwieństwie do większości odpowiedzi tutaj. 4. Najlepsza praktyka (według MDN, wyrażenie regularne jest najbardziej niezawodnym sposobem wyodrębnienia wartości). 5. Futureprook (jeśli więcej opcji zostanie dodanych do plików cookie, zostaną one zachowane). 6. Jeden obiekt zanieczyszcza kod mniej niż kilka funkcji. 7. Pobierz, ustaw i usuń oraz łatwe dodawanie kolejnych metod. 8. ES7 (pyszne modne słowa).
SamGoody

7

Dla tych, którzy potrzebują zapisywać obiekty, takie jak {foo: 'bar'}, udostępniam zredagowaną wersję odpowiedzi @ KevinBurke. Dodałem JSON.stringify i JSON.parse, to wszystko.

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

}

Teraz możesz robić takie rzeczy:

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

Wielokrotnie korzystałem z akceptowanej odpowiedzi tego wątku. To świetny kawałek kodu: prosty i użyteczny. Ale zwykle używam Babel i ES6 i modułów, więc jeśli jesteś podobny do mnie, oto kod do skopiowania, aby przyspieszyć programowanie w ES6

Zaakceptowana odpowiedź przepisana jako moduł w 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 '';
};

Następnie możesz po prostu zaimportować go jako dowolny moduł (ścieżka może się oczywiście różnić):

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

5

Oto kod do pobierania, ustawiania i usuwania plików cookie w 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);
}

Źródło: http://mycodingtricks.com/snippets/javascript/javascript-cookies/


2

Używam tego obiektu. Wartości są kodowane, dlatego należy wziąć to pod uwagę podczas odczytu lub zapisu ze strony serwera.

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

Prosty sposób na odczyt plików cookie w 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

Użyłem js-cookie do sukcesu.

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

0

Możesz użyć mojego modułu ES cookie do pobierania / ustawiania / usuwania plików cookie.

Stosowanie:

W tagu head umieść następujący kod:

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

lub

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

Teraz możesz używać window.cookie do przechowywania informacji o użytkowniku na stronach internetowych.

cookie.isEnabled ()

Czy plik cookie jest włączony w Twojej przeglądarce?

returns {boolean} true if cookie enabled.

Przykład

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

cookie.set (nazwa, wartość)

Ustaw ciasteczko.

name: cookie name.
value: cookie value.

Przykład

cookie.set('age', 25);

cookie.get (name [, defaultValue]);

dostać ciasteczko.

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

cookie.remove (nazwa);

Usuń ciasteczko.

name: cookie name.
Przykład
cookie.remove( 'age' );

Przykład użycia


-1

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

Powinno to zepsuć się, gdy tylko znajdziesz wartość swojego pliku cookie i zwrócisz jego wartość. Moim zdaniem bardzo elegancki z podwójnym podziałem.

Zamiennikiem warunku if jest białe wykończenie, aby upewnić się, że pasuje poprawnie


-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

Napisałem prosty plik cookie. Posiada trzy funkcje do tworzenia pliku cookie, czytania pliku cookie i usuwania pliku 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

Oto przykład ze wspomnianego 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 "";
}

-1

Prosta lektura

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

Bezczelny i prosty sposób na odczytanie pliku cookie może wyglądać następująco:

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

To może być używany, jeśli wiesz, że twój plik cookie zawiera coś takiego: username="John Doe"; id=123;. Zauważ, że ciąg potrzebuje cudzysłowów w pliku cookie. Prawdopodobnie nie jest to zalecany sposób, ale działa podczas testowania / uczenia się.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.