Як створити та прочитати значення з файлу cookie?

Як я можу створити та прочитати значення з файлу cookie у JavaScript?

Ось функції, які ви можете використовувати для створення та отримання файлів 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 "";
}

Мінімалістичний та повнофункціональний підхід 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)
}

Файли cookie JQuery

або звичайний 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 пропонує просту рамку для читання та запису файлів cookie з повною підтримкою unicode разом із прикладами того, як її використовувати.

Після включення на сторінку ви можете встановити файл cookie:

docCookies.setItem(name, value);

прочитати печиво:

docCookies.getItem(name);

або видалити файл cookie:

docCookies.removeItem(name);

Наприклад:

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

Дивіться більше прикладів та деталей на сторінці document.cookie Mozilla .

Версія цього простого js-файлу розміщена на github .

ES7, використовуючи регулярний вираз для get (). На основі 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)

Використання - Cookie.get (ім'я, значення [, параметри]):
параметри підтримують усі стандартні параметри файлів cookie та додає "дні":

• шлях : '/' - будь-який абсолютний шлях. За замовчуванням : поточне місцезнаходження документа,
• домен : 'sub.example.com' - може не починатися з крапки. За замовчуванням : поточний хост без піддомену.
• secure : true - Подавайте cookie лише через https. За замовчуванням : false.
• днів : 2 - дні до закінчення терміну дії файлу cookie. За замовчуванням : Кінець сеансу.
  Альтернативні способи встановлення терміну придатності:
  • закінчується : 'Нд, 18 лютого 2018 16:23:42 GMT' - дата закінчення терміну дії у вигляді рядка GMT.
    Поточну дату можна отримати за допомогою: нової дати (Date.now ()). ToUTCString ()
  • "Макс-вік" : 30 - те саме, що дні, але замість днів.

Інші відповіді використовують "термін дії" замість "максимального віку" для підтримки старих версій IE. Цей метод вимагає ES7, тому IE7 все одно вийшов (це не велика справа).

Примітка. Смішні символи, такі як "=" та "{:}", підтримуються як значення файлів cookie, а регулярний гекс обробляє пробіли та пробіли (від інших ліб).
Якщо ви хочете зберігати об'єкти, кодуйте їх до і після за допомогою та JSON.stringify та JSON.parse, відредагуйте вище, або додайте інший метод. Наприклад:

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

Для тих, хто потребує збереження об'єктів, таких як {foo: 'bar'}, я поділяю свою відредаговану версію відповіді @ KevinBurke. Я додав JSON.stringify та JSON.parse, ось і все.

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

}

Отже, тепер ви можете робити такі речі:

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

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

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

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

Я вже багато разів використовував прийняту відповідь на цю тему. Це чудовий фрагмент коду: простий і зручний у використанні. Але я зазвичай використовую babel і ES6 і модулі, тому якщо ви такі, як я, ось код для копіювання для швидшого розвитку з ES6

Прийнята відповідь переписана як модуль з 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 '';
};

Після цього ви можете просто імпортувати його як будь-який модуль (шлях, звичайно, може змінюватися):

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

Ось код для отримання, встановлення та видалення файлів cookie у 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);
}

Джерело: http://mycodingtricks.com/snippets/javascript/javascript-cookies/

Я використовую цей об’єкт. Значення кодуються, тому це потрібно враховувати під час читання або запису з боку сервера.

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

})();

Простий спосіб читання файлів cookie в ES6.

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

Я використовував js-cookie для успіху.

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

Ви можете використовувати мій модуль ES cookie для отримання / встановлення / видалення файлів cookie.

Використання:

У своєму головному тегу включіть такий код:

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

або

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

Тепер ви можете використовувати window.cookie для зберігання інформації про користувачів на веб-сторінках.

cookie.isEnabled ()

Чи ввімкнено файл cookie у вашому веб-переглядачі?

returns {boolean} true if cookie enabled.

Приклад

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

cookie.set (ім'я, значення)

Встановіть печиво.

name: cookie name.
value: cookie value.

Приклад

cookie.set('age', 25);

cookie.get (ім'я [, defaultValue]);

отримати печиво.

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 (назва);

Видаліть cookie.

name: cookie name.

cookie.remove( 'age' );

Приклад використання

Удосконалена версія 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;
}

Це має перерватися, як тільки ви знайдете значення файлу cookie та повернете його значення. На мою думку дуже елегантний з подвійним розколом.

Замінник if-condition є обробкою білого простору, щоб переконатися, що він відповідає правильно

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

Я написав прості cookieUtils, він має три функції для створення файлів cookie, читання файлів cookie та видалення файлів 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;';
    }
};

Ось приклад з 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 "";
}

Просте читання

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

Нахабний і простий спосіб читання печива може бути чимось на кшталт:

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

Це може бути використано , якщо ви знаєте , що ваш печиво містить що - щось на кшталт: username="John Doe"; id=123;. Зауважте, що рядок потребує лапок у файлі cookie. Мабуть, не рекомендований спосіб, але працює для тестування / навчання.