Как мне установить / удалить cookie с помощью jQuery?

1244

Как установить и удалить cookie-файл с помощью jQuery, например создать cookie-файл с именем testи установить для него значение 1?

О, мой бог
источник

Ответы:

1767

Обновление апреля 2019

JQuery не нужен для чтения / манипуляции куки, поэтому не используйте оригинальный ответ ниже.

Вместо этого перейдите на https://github.com/js-cookie/js-cookie и используйте там библиотеку, которая не зависит от jQuery.

Основные примеры:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

Смотрите документы на GitHub для деталей.


Смотрите плагин:

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. Очевидно, оригинальный плагин никуда не денется.

Алистер Эванс
источник
1
из журнала изменений: «$ .removeCookie ('foo') для удаления файла cookie с использованием $ .cookie ('foo', null) теперь не рекомендуется"
Богдан
68
@Kazar Я провел 6 часов без перерывов. Я наконец понял проблему этим утром. Я использую это с phonegap, на сайте это работает без проблем, но на устройстве, когда вы пытаетесь получить cookie, который имеет JSON, это уже объект, поэтому, если вы пытаетесь его JSON.parse, он выдаст ошибку синтаксического анализа JSON. Решил это с помощью if ifof x == 'string' ', сделав JSON.parse, иначе просто используйте объект. 6 чертовых часов, ищущих ошибку во всех неправильных местах
Андрей Кристиан Продан
10
при удалении куки, не забудьте также указать путь к тому же пути , как вы установите печенье первоначально:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar
30
Это 2015 год, и мы все еще получаем более 2 000 уникальных посещений в неделю в репозитории jquery-cookie только из этого ответа. Из этого мы можем извлечь некоторые уроки: 1. куки не скоро умрут и 2. Люди все еще ищут «плагин jquery для спасения мира». jQuery НЕ необходим для обработки файлов cookie, jquery-cookie переименовывается в js-cookie ( github.com/js-cookie/js-cookie ), а зависимость jquery была сделана необязательной в версии 1.5.0. Будет версия 2.0.0 с множеством интересных вещей, которые стоит посмотреть и внести свой вклад, спасибо!
Фагнер Брак
2
@Kazar Мы не планируем физически перемещать его, из этого источника поступает значительное количество трафика на этот URL из нескольких источников, а Клаус является историческим владельцем пространства имен jquery-cookie. Нет необходимости беспокоиться о том, что этот URL скоро исчезнет. Но, тем не менее, я бы посоветовал всем начать смотреть новый репозиторий на наличие обновлений.
Фагнер Брак
429

Нет необходимости использовать 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);
}

Взгляни на

Русь Кэм
источник
2
Привет Расс, хорошая вещь в jquery cookie в том, что он ускользает от данных
Святослав Маринов
2
@lordspace - просто оберните значение в window.escape / unescape, чтобы записать / получить значение cookie, соответственно :)
Russ Cam
46
Более лучший код cookie можно найти здесь: developer.mozilla.org/en/DOM/document.cookie
SDC
3
плагин jQuery cookie гораздо проще
brauliobo
1
вместо escape или unescape вы можете использовать encodeURI или decodeURI
Родислав Молдаван
143
<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 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;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

Вы можете установить куки как

setCookie('test','1','1'); //(key,value,expiry in days)

Вы можете получить печенье как

getCookie('test');

И, наконец, вы можете стереть куки, как этот

eraseCookie('test');

Надеюсь, это поможет кому-то :)

РЕДАКТИРОВАТЬ:

Если вы хотите установить cookie для всех путей / страниц / каталогов, тогда установите атрибут пути для cookie

function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString();
}

Спасибо вики

Виньеш Пичамани
источник
1
60 * 1000 = 60 секунд 60 * (60 * 1000) = 60 минут, что составляет 1 час 24 * (60 * (60 * 1000)) = 1 день, который 24 часа. Надеюсь, это поможет.
Vignesh Pichamani
1
1 * 24 * 60 * 60 * 1000 настроить 1 на 1 день, или вы можете сделать 365
Vignesh Pichamani
1
Хорошие функции ... Но почему они внутри тега document.ready?
Dss
1
Это не будет работать в Safari или IE для любых символов вне диапазона ASCII, таких как é, и т. Д. Кроме того, это не будет работать для некоторых специальных символов, которые не допускаются в cookie-name или cookie-value. Я рекомендую следующую ссылку: tools.ietf.org/html/rfc6265
Фагнер Брак
18

Вы можете использовать плагин, доступный здесь ..

https://plugins.jquery.com/cookie/

а потом написать печенье сделать $.cookie("test", 1);

чтобы получить доступ к установленному файлу cookie $.cookie("test");

Дивьеш Канзария
источник
3
есть более новая версия этого плагина
Андрей Кристиан Продан
13

Вот мой глобальный модуль, который я использую -

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

};
seanjacob
источник
10

Убедитесь, что не делаете что-то вроде этого:

var a = $.cookie("cart").split(",");

Затем, если cookie не существует, отладчик вернет какое-то бесполезное сообщение типа «.cookie not a function».

Всегда объявляйте сначала, а затем делите разделение после проверки на ноль. Нравится:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");
user890332
источник
Пример кода не завершен. Не }хватает только одного или нескольких строк кода?
Питер Мортенсен
Он просто отсутствует, но, очевидно, вам нужно будет добавить больше строк кода, чтобы продолжить то, что вы хотите сделать с разделением.
user890332
8

Вот как вы устанавливаете cookie с помощью JavaScript:

приведенный ниже код был взят из 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=/;";
S1awek
источник
7

Простой пример установки 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>

Просто скопируйте / вставьте и используйте этот код для установки вашего куки.

Webpixstudio
источник
1
Просто обратите внимание, браузер по умолчанию кэширует ресурсы в соответствии с их именами файлов. В этом примере jquery-1.9.0.min.jsбудет перезагружен для всех при обновлении имени файла jquery-1.9.1.min.js, в противном случае браузер вообще НЕ будет запрашивать сервер для проверки обновленного содержимого. Если вы обновите код внутри jquery.cookie.jsбез изменения его имени файла, то он НЕ может быть перезагружен в браузерах, которые уже кэшировали jquery.cookie.jsресурс.
Фагнер Брэк,
Если вы пишете веб-сайт и копируете / вставляете его, имейте в виду, что это не сработает, если вы обновите jquery.cookie.jsверсию без изменения ее имени файла (если только ваш сервер не занимается кэшированием с использованием электронных тегов).
Фагнер Брэк,
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // когда загружаемая страница на другой странице не найдена $ ('# name'). text (data [0]); . $ ( '# адрес') текст (данные [1]); }
Мохаммад Джавад
5

Вы можете использовать библиотеку на сайте Mozilla здесь

Вы сможете установить и получить куки, как это

docCookies.setItem(name, value);
docCookies.getItem(name);
Мустафа Самир
источник
3

Я думаю, что Фрешер дал нам хороший способ, но есть ошибка:

    <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 истекает немедленно :)

barmyman
источник
2
«значение» может быть строкой. В вопросе он использует 1 в качестве примера. Значение должно соответствовать ключу, а не длине в днях до истечения срока действия файла cookie. Если значение было передано как "foo", ваша версия потерпит крах.
Питер
1

я думал что ответ Виньеша Пихамани был самым простым и чистым. Просто добавив к нему возможность установить количество дней до истечения срока действия:

РЕДАКТИРОВАТЬ: также добавлена ​​опция «никогда не истекает», если номер дня не установлен

        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) 
freeworlder
источник
1

Я знаю, что есть много хороших ответов. Часто мне нужно только читать куки, и я не хочу создавать накладные расходы, загружая дополнительные библиотеки или определяя функции.

Вот как читать куки в одной строке JavaScript . Я нашел ответ в статье блога Гильерме Родригеса :

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

Это читает печенье с именем key, красиво, чисто и просто.

Fabian
источник
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Хасан Бадшах
источник