Как мне создать и прочитать значение из cookie?
Как мне создать и прочитать значение из cookie в JavaScript?
24 ответа
Вот функции, которые вы можете использовать для создания и получения файлов cookie.
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 "";
}
Минималистичный и полнофункциональный подход 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)
}
или простой 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);
}
}
}
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(имя, значение [, параметры]):
options поддерживает все стандартные параметры cookie и добавляет "дни":
- путь: '/' - любой абсолютный путь. По умолчанию: текущее местоположение документа,
- домен: 'sub.example.com' - не может начинаться с точки. По умолчанию: текущий хост без субдомена.
- secure: true - обслуживать только cookie через https. По умолчанию: false.
- дни: 2 - до истечения срока действия cookie. По умолчанию: конец сессии.
Альтернативные способы установки срока действия:- expires: 'Sun, 18 Feb 2018 16:23:42 GMT' - дата истечения срока в виде строки GMT.
Текущую дату можно получить с помощью: new Date(Date.now()). ToUTCString () - 'max-age': 30 - то же, что и дни, но в секундах вместо дней.
- expires: 'Sun, 18 Feb 2018 16:23:42 GMT' - дата истечения срока в виде строки GMT.
Другие ответы используют "expires" вместо "max-age" для поддержки более старых версий 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);
Mozilla предоставляет простую структуру для чтения и записи файлов cookie с полной поддержкой юникода, а также примеры того, как ее использовать.
После включения на страницу вы можете установить cookie:
docCookies.setItem(name, value);
прочитайте печенье:
docCookies.getItem(name);
или удалите куки:
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');
Смотрите больше примеров и деталей на странице Mozilla's document.cookie.
Для тех, кому нужны объекты сохранения, такие как {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/
Тест производительности
Сравнение версий ES6 некоторых популярных
getCookie
функции (с моими улучшениями):
TL;DR:
for...of
версия кажется самой быстрой для реальных файлов cookie :)
Важный:
document.cookie
может предоставить повторяющиеся имена файлов cookie, если есть файлы cookie с тем же именем и текущим путем к странице (например, ). Но файл cookie для текущего пути всегда будет первым в строке, поэтому помните об этом при использовании версии из другого ответа, представленного здесь (он возвращает последний найденный файл cookie вместо первого).Исправлено
reduce()
версия далее в моем ответе.
Для..версии:
Самый быстрый для набора данных реального теста (10 файлов cookie с длинными значениями). Но результаты по производительности почти такие же, как и с ванилью
for
петля и с
Array.find()
, так что используйте то, что вам нравится :)
function getCookieForOf(name) {
const nameEQ = name + '=';
for (const cookie of document.cookie.split('; ')) {
if (cookie.indexOf(nameEQ) === 0) {
const value = cookie.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
индекс версии
Невероятно быстро в искусственном тестовом наборе из 1000 файлов cookie с короткими значениями (потому что он не создает массив с 1000 записями). Честно говоря, я считаю, что в тестовом коде может быть ошибка, которая делает эту версию такой быстрой (если вы найдете такую, пожалуйста, дайте мне знать). В любом случае, вряд ли в реальном приложении будет 1000 файлов cookie;)
Это медленно для набора реальных тестовых данных с 10 длинными файлами cookie.
function getCookieIndexOf(name) {
const nameEQ = name + '=';
const cookies = document.cookie;
const cookieStart = cookies.indexOf(nameEQ);
if (cookieStart !== -1) {
const cookieValueStart = cookieStart + nameEQ.length;
const cookieEnd = cookies.indexOf(';', cookieValueStart);
const value = cookies.substring(
cookieValueStart,
cookieEnd !== -1 ? cookieEnd : undefined
);
return decodeURIComponent(value); // returns first found cookie
}
return null;
}
Версия Array.find()
function getCookieFind(name) {
const nameEQ = name + '=';
const foundCookie = document.cookie
.split('; ')
.find(c => c.indexOf(nameEQ) === 0); // returns first found cookie
if (foundCookie) {
return decodeURIComponent(foundCookie.substring(nameEQ.length));
}
return null;
}
Ванильная, старая школа, версия for-loop ;)
function getCookieFor(name) {
const nameEQ = name + "=";
const ca = cookies.split('; ');
for(let i=0; i < ca.length; i++) {
const c = ca[i];
if (c.indexOf(nameEQ) === 0) {
const value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
// ES5 version:
function getCookieFor(name) {
var nameEQ = name + "=";
var ca = cookies.split('; ');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
if (c.indexOf(nameEQ) === 0) {
var value = c.substring(nameEQ.length);
return decodeURIComponent(value); // returns first found cookie
}
}
return null;
}
Версия Array.reduce()
Моя исправленная версия этого ответа от @artnikpro - возвращает первый найденный файл cookie, поэтому лучше работает с повторяющимися именами файлов cookie для текущего пути (например,
path=/faq
) а также
path=/
.
Эта версия самая медленная во всех тестах на производительность, поэтому ИМХО ее следует избегать.
function getCookieReduce(name) {
return document.cookie.split('; ').reduce((r, v) => {
const [n, ...val] = v.split('='); // cookie value can contain "="
if(r) return r; // returns first found cookie
return n === name ? decodeURIComponent(val.join('=')) : r; // returns last found cookie (overwrites)
}, '');
}
Вы можете запустить тесты самостоятельно здесь: https://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reducehttps://www.measurethat.net/Benchmarks/Show/16012/5/getcookie-for-vs-forof-vs-indexof-vs-find-vs-reduce .
Функция setCookie() TypeScript
Вот также моя версия функции для установки файла cookie с
encodeURIComponent
,
TypeScript
, а также
SameSite
опция (которая скоро потребуется для Firefox ):
function setCookie(
name: string,
value: string = '',
days: number | false = false, // session length if not provided
path: string = '/', // provide an empty string '' to set for current path (managed by a browser)
sameSite: 'none' | 'lax' | 'strict' = 'lax', // required by Firefox
isSecure?: boolean
) {
let expires = '';
if (days) {
const date = new Date(
Date.now() + days * 24 * 60 * 60 * 1000
).toUTCString();
expires = '; expires=' + date;
}
const secure = isSecure || sameSite === 'none' ? `; Secure` : '';
const encodedValue = encodeURIComponent(value);
document.cookie = `${name}=${encodedValue}${expires}; path=${path}; SameSite=${sameSite}${secure}`;
}
API хранилища файлов cookie Google Chrome
Благодаря ответу @oncode стоит отметить, что команда Google Chrome предложила некоторую стандартизацию (наконец-то! Это действительно смешно, что у нас до сих пор нет общепринятого API для файлов cookie) с асинхронным API хранилища файлов cookie (доступен в Google Chrome, начиная с версии 87): https://wiCG.github.io/cookie-store/
К сожалению, это все еще неофициально и даже не рассматривается W3C и не является предложением ES: github.com/tc39/proposals.
Какой позор, у нас до сих пор нет стандартного API для файлов cookie...
К счастью, у нас есть
cookie-store
polyfill для других браузеров в виде пакета npm ( gitHub), который имеет размер всего 1,7 КБ в сжатом виде ;)
Мне нравится это однострочное решение для чтения файлов cookie в современном JavaScript:
let cookies = Object.fromEntries(document.cookie.split(';').map(i=>i.trim().split('=')));
И теперь у вас есть объект JavaScript с ключами и значениями.
Вы можете использовать мой модуль cookie ES для получения / установки / удаления файлов 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(имя, значение)
Установите cookie.
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' );
Я использовал js-cookie для успеха.
<script src="/path/to/js.cookie.js"></script>
<script>
Cookies.set('foo', 'bar');
Cookies.get('foo');
</script>
Я использую этот объект. Значения закодированы, поэтому необходимо учитывать это при чтении или записи со стороны сервера.
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 с использованием шаблонных литералов. Имейте в виду, что вам нужно кодировать / декодировать значения самостоятельно, но это будет работать из коробки для более простых целей, таких как сохранение номеров версий.
const getCookie = (cookieName) => {
return (document.cookie.match(`(^|;) *${cookieName}=([^;]*)`)||[])[2]
}
const setCookie = (cookieName, value, days=360, path='/') => {
let expires = (new Date(Date.now()+ days*86400*1000)).toUTCString();
document.cookie = `${cookieName}=${value};expires=${expires};path=${path};`
}
const deleteCookie = (cookieName) => {
document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;`;
}
Команда Chrome предложила новый способ асинхронного управления файлами cookie с API хранилища файлов cookie (доступен в Google Chrome, начиная с версии 87): https://wicg.github.io/cookie-store/
Используйте его уже сегодня с полифилом для других браузеров: https://github.com/mkay581/cookie-store
// load polyfill
import 'cookie-store';
// set a cookie
await cookieStore.set('name', 'value');
// get a cookie
const savedValue = await cookieStore.get('name');
Я использую следующие функции, которые я написал, взяв лучшее, что я нашел из различных источников, и устранил некоторые ошибки или неточности.
Функция setCookie не имеет дополнительных параметров, только простые вещи, но код легко понять, что всегда является плюсом:
function setCookie(name, value, daysToLive = 3650) { // 10 years default
let cookie = name + "=" + encodeURIComponent(value);
if (typeof daysToLive === "number") {
cookie += "; max-age=" + (daysToLive * 24 * 60 * 60);
document.cookie = cookie + ";path=/";
}
}
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if (name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1].trim());
}
}
return undefined;
}
function deleteCookie(name) {
setCookie(name, '', -1);
}
Простой способ читать куки в ES6.
function getCookies() {
var cookies = {};
for (let cookie of document.cookie.split('; ')) {
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
}
console.dir(cookies);
}
Через интерфейс, похожий на
sessionStorage
и
localStorage
:
const cookieStorage = {
getItem: (key) {
const cookies = document.cookie.split(';')
.map(cookie => cookie.split('='))
.reduce(
(accumulation, [key, value]) => ({...accumulation, [key.trim()]: value}),
{}
)
return cookies[key]
},
setItem: (key, value) {
document.cookie = `${key}=${value}`
},
}
Его использование
cookieStorage.setItem('', '')
и
cookieStorage.getItem('')
.
Простое чтение
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)
}
Нахальный и простой способ чтения cookie-файла может выглядеть примерно так:
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
Это может быть использовано, если вы знаете, что ваш cookie содержит что-то вроде: username="John Doe"; id=123;
, Обратите внимание, что строка будет нуждаться в кавычках в куки. Вероятно, не рекомендуется, но работает для тестирования / обучения.
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);
}
}
}
Улучшенная версия 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- это пробел, чтобы убедиться, что он соответствует правильно
Я написал простой cookieUtils, он имеет три функции для создания куки, чтения куки и удаления куки.
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 "";
}