Как мне установить / удалить cookie с помощью jQuery?
Как установить и удалить cookie с помощью jQuery, например создать cookie с именем test и установите значение в 1?
18 ответов
Смотрите плагин:
https://github.com/carhartl/jquery-cookie
Затем вы можете сделать:
$.cookie("test", 1);
Удалить:
$.removeCookie("test");
Кроме того, чтобы установить тайм-аут на определенное количество дней (10 здесь) в куки:
$.cookie("test", 1, { expires : 10 });
Если опция expires опущена, то cookie становится cookie сессии и удаляется при выходе из браузера.
Чтобы охватить все варианты:
$.cookie("test", 1, {
expires : 10, // Expires in 10 days
path : '/', // The value of the path attribute of the cookie
// (Default: path of page that created the cookie).
domain : 'jquery.com', // The value of the domain attribute of the cookie
// (Default: domain of page that created the cookie).
secure : true // If set to true the secure attribute of the cookie
// will be set and the cookie transmission will
// require a secure protocol (defaults to false).
});
Чтобы прочитать значение куки:
var cookieValue = $.cookie("test");
Вы можете указать параметр path, если cookie был создан по пути, отличному от текущего:
var cookieValue = $.cookie("test", { path: '/foo' });
ОБНОВЛЕНИЕ (апрель 2015):
Как указано в комментариях ниже, команда, работавшая над исходным плагином, удалила зависимость jQuery в новом проекте ( https://github.com/js-cookie/js-cookie), который имеет ту же функциональность и общий синтаксис, что и версия jQuery. Очевидно, оригинальный плагин никуда не денется.
Нет необходимости использовать jQuery, в частности, для управления файлами cookie.
Из QuirksMode (включая экранирующие символы)
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 = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = encodeURIComponent(name) + "=";
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, c.length);
if (c.indexOf(nameEQ) === 0)
return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
Взгляни на
<script type="text/javascript">
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
</script>
Вы можете установить куки как
setCookie('test','1');
Вы можете получить печенье как
getCookie('test');
Надеюсь, это поможет кому-то:)
РЕДАКТИРОВАТЬ:
Если вы хотите сохранить путь cookie только для домашней страницы, сделайте это следующим образом:
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value +';path=/'+ ';expires=' + expires.toUTCString();
}
Спасибо вики
Вы можете использовать плагин, доступный здесь..
https://plugins.jquery.com/cookie/
а потом написать печенье сделать$.cookie("test", 1);
чтобы получить доступ к установленному файлу cookie$.cookie("test");
Вот мой глобальный модуль, который я использую -
var Cookie = {
Create: 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();
}
document.cookie = name + "=" + value + expires + "; path=/";
},
Read: function (name) {
var nameEQ = name + "=";
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, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
},
Erase: function (name) {
Cookie.create(name, "", -1);
}
};
Убедитесь, что не делаете что-то вроде этого:
var a = $.cookie("cart").split(",");
Затем, если cookie не существует, отладчик вернет какое-то бесполезное сообщение типа ".cookie not a function".
Всегда объявляйте сначала, а затем делите разделение после проверки на ноль. Как это:
var a = $.cookie("cart");
if (a != null) {
var aa = a.split(",");
Вот как вы устанавливаете cookie с помощью jQuery:
приведенный ниже код был взят из https://www.w3schools.com/js/js_cookies.asp
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=/"; }
Теперь вы можете получить cookie с функцией ниже:
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 ""; }
И, наконец, вот как вы проверяете куки:
function checkCookie() { var username = getCookie("username"); if (username != "") { alert("Welcome again " + username); } else { username = prompt("Please enter your name:", ""); if (username != "" && username != null) { setCookie("username", username, 365); } } }
Если вы хотите удалить cookie, просто установите для параметра expires заданную дату:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Простой пример установки cookie в вашем браузере:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.cookie Test Suite</title>
<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="JSON-js-master/json.js"></script>
<script src="JSON-js-master/json_parse.js"></script>
<script>
$(function() {
if ($.cookie('cookieStore')) {
var data=JSON.parse($.cookie("cookieStore"));
$('#name').text(data[0]);
$('#address').text(data[1]);
}
$('#submit').on('click', function(){
var storeData = new Array();
storeData[0] = $('#inputName').val();
storeData[1] = $('#inputAddress').val();
$.cookie("cookieStore", JSON.stringify(storeData));
var data=JSON.parse($.cookie("cookieStore"));
$('#name').text(data[0]);
$('#address').text(data[1]);
});
});
</script>
</head>
<body>
<label for="inputName">Name</label>
<br />
<input type="text" id="inputName">
<br />
<br />
<label for="inputAddress">Address</label>
<br />
<input type="text" id="inputAddress">
<br />
<br />
<input type="submit" id="submit" value="Submit" />
<hr>
<p id="name"></p>
<br />
<p id="address"></p>
<br />
<hr>
</body>
</html>
Просто скопируйте / вставьте и используйте этот код для установки вашего куки.
Вы можете использовать библиотеку на сайте Mozilla здесь
Вы сможете установить и получить куки, как это
docCookies.setItem(name, value);
docCookies.getItem(name);
Я думаю, что Фрешер дал нам хороший способ, но есть ошибка:
<script type="text/javascript">
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
</script>
Вы должны добавить "значение" рядом с getTime(); в противном случае срок действия файла cookie истекает немедленно:)
Фон
Файлы cookie изначально были изобретены Netscape для предоставления «памяти» веб-серверам и браузерам. Протокол HTTP, который обеспечивает передачу веб-страниц вашему браузеру и запросы браузера на страницы серверам, не имеет состояния. Это означает, что после того, как сервер отправил страницу браузеру, запрашивающему ее, он не запоминает вещь об этом. Таким образом, если вы заходите на одну и ту же веб-страницу второй, третий, сотый или миллионный раз, сервер снова считает, что это самый первый раз, когда вы туда зашли.
Это может раздражать по-разному. Сервер не может вспомнить, идентифицировали ли вы себя, когда хотите получить доступ к защищенным страницам, он не может запомнить ваши пользовательские настройки, он не может ничего запомнить. Как только была изобретена персонализация, это стало серьезной проблемой.
Файлы cookie были изобретены для решения этой проблемы. Есть и другие способы решить эту проблему, но файлы cookie просты в обслуживании и очень универсальны.
Как работают файлы cookie
Файл cookie — это не что иное, как небольшой текстовый файл, который хранится в вашем браузере. Он содержит некоторые данные:
- Пара имя-значение, содержащая фактические данные
- Дата истечения срока действия, после которой он перестает быть действительным
- Домен и путь сервера, на который он должен быть отправлен
Пример
Чтобы установить или отключить файлы cookie с помощью Javascript, вы можете сделать следующее:
// Cookies
function createCookie(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 + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
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, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function setCookie(name, days) {
createCookie(name, name, days);
}
function unsetCookie(name) {
createCookie(name, "", -1);
}
Вы можете получить доступ, как показано ниже,
setCookie("demo", 1); // to set new cookie
readCookie("demo"); // to retrive data from cookie
unsetCookie("demo"); // will unset that cookie
Уменьшая количество операций по сравнению с предыдущими ответами, я использую следующее.
function setCookie(name, value, expiry) {
let d = new Date();
d.setTime(d.getTime() + (expiry*86400000));
document.cookie = name + "=" + value + ";" + "expires=" + d.toUTCString() + ";path=/";
}
function getCookie(name) {
let cookie = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return cookie ? cookie[2] : null;
}
function eatCookie(name) {
setCookie(name, "", -1);
}
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Я думал, Vignesh Pichamani ответ Vignesh Pichamani был самым простым и чистым. Просто добавив к нему возможность установить количество дней до истечения срока действия:
РЕДАКТИРОВАТЬ: также добавлена опция "никогда не истекает", если номер дня не установлен
function setCookie(key, value, days) {
var expires = new Date();
if (days) {
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
} else {
document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
}
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}
Установите куки:
setCookie('myData', 1, 30); // myData=1 for 30 days.
setCookie('myData', 1); // myData=1 'forever' (until the year 9999)
Я знаю, что есть много хороших ответов. Часто мне нужно только читать куки, и я не хочу создавать накладные расходы, загружая дополнительные библиотеки или определяя функции.
Вот как читать куки в одной строке JavaScript. Я нашел ответ в статье блога Гильерме Родригеса:
('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()
Это читает куки с именем key, красиво, чисто и просто.
Я знаю, есть уже много ответов, но вот тот, который
set,
get, а также
deleteвсе красиво ванильно и красиво помещено в глобальную ссылку:
window.cookieMonster = window.cookieMonster ||
{
// https://stackoverflow.com/a/25490531/1028230
get: function (cookieName) {
var b = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
},
delete: function (name) {
document.cookie = '{0}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
.replace('{0}', name);
},
set: function (name, value) {
document.cookie =
'{0}={1};expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/;SameSite=Lax'
.replace('{0}', name)
.replace('{1}', value);
}
};
Обратите внимание, что регулярное выражение получения cookie было взято из этого ответа на вопрос в другом замке .
И давайте протестируем:
cookieMonster.set('chocolate', 'yes please');
cookieMonster.set('sugar', 'that too');
console.log(cookieMonster.get('chocolate'));
console.log(document.cookie);
cookieMonster.delete('chocolate');
console.log(cookieMonster.get('chocolate'));
console.log(document.cookie);
Если у вас не было файлов cookie перед попыткой, вы должны дать вам ...
yes please
chocolate=yes please; sugar=that too
sugar=that too
Обратите внимание, что печенье длятся не так долго, как жара-смерть вселенной, но, по сути, с нашей точки зрения. Вы можете легко понять, как изменить даты, посмотрев на строки здесь или на другие ответы.
Следующий код удалит все файлы cookie в текущем домене и всех конечных поддоменах (
www.some.sub.domain.com,
.some.sub.domain.com,
.sub.domain.com и так далее.).
Однострочная ванильная версия JS (без jQuery):
document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));
Это читаемая версия этой единственной строки:
document.cookie.replace(
/(?<=^|;).+?(?=\=|;|$)/g,
name => location.hostname
.split(/\.(?=[^\.]+\.)/)
.reduceRight((acc, val, i, arr) => i ? arr[i]='.'+val+acc : (arr[i]='', arr), '')
.map(domain => document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`)
);