работа с куками из javascript

    Всем привет!

    Сегодня хочется поделиться с теми кто еще не в теме, теорией о том как работать с cookie из JS

    JS не предоставляет удобного API для работы с cookies. И это в принципе не плохо, могло бы быть и хуже (например js вообще не реализовывал бы работы с куками), но все же, лучше, когда можно читать куки с помощью одной инструкции (чего пока нативным js — невозможно).

    Существует множество framework'ов и plugin'ов к ним, которые восполняют данный недостаток. Однако бывают проекты где нецелесообразно подключать framework лишь для удобства работы с куками.

    Собственно мною была поставлена и реализована задача создания методов по управлению куками, с красивыми аксессорами типа:

    cookie.set('bla', 'blabla');
    cookie.get('bla');


    code.google.com/p/jscookie — страничка на гуглокоде

    Немножечко теории о механизме предоставляемом js'ом для работы с cookie:

    Все что у нас есть — свойство document.cookie, оно не реализует за собой никаких привычных рядовому программисту методов, типа document.cookie.get('bla');

    Чтение cookie


    document.cookie содержит набор значений cookie_name=cookie_value; (разделенных между собой "; " (точка с запятой плюс пробел)), отсюда следует, что бы получить значение конкретной куки — необходимо пропарсить всю строку и выдернуть необходимые данные. Что примечательно, в свойстве содержится пары имя=значение, никаких дополнительный данных о куках таких как: expires time, path, domain, secure — не содержит.

    Создание/обновление cookie


    document.cookie ведет себя как строка, но не обычная. представим что у нас есть 2 куки key1 = val1 и key2 = val2.

    alert(document.cookie) //key1=val1; key2=val2;

    Для того что бы добавить новую куку key3 = val3

    document.cookie= 'key3=val3; ';
    alert(document.cookie) //key1=val1; key2=val2; key3=val3;

    Для того что бы обновить куку, зададим key2 значение hello world

    document.cookie= 'key2=hello world; ';
    alert(document.cookie) //key1=val1; key2=hello world; key3=val3;

    Удаление Cookie


    Теперь немножечко расскажу о куках как таковых, не претендую на полное и досканальное знание этой тематики, просто чуть чуть расскажу что знаю.

    Кука помимо названия и значения имеет в своем арсенале еще несколько важных свойств, а именно:

    expires — время, после которого кука удаляется.
    domain — домен для которого кука действительна, грубо говоря, если кука была создана на домене js.com, то ни на каком другом домене она не будет видна.
    path — множество документов, при запросе на которые браузер будет посылать куку
    secure — свойство-флаг разрешающий посылать браузуру куку только при https соединении

    вообщем все это записывается в виде document.cookie = 'key4=val4; [expires=Sat, 09 Jan 2010 16:14:53 GMT; ][path=/; ][domain=js.com; ][secure; ]

    Фокус с удалением куки состоит в том что бы обновить куку со свойством expires указывающим в прошлое, например:

    document.cookie= 'key2=; expires=Mon, 05 Jul 1982 16:37:55 GMT; ';
    alert(document.cookie)//key1=val1; key3=val3;

    Собственно все

    UPD: это мой первый пост, прошу сильно не пинать. Надеюсь кому то будет полезно
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 15

      +1
      то что написано в этом посте обычный веб-разработчик и так знает, вы бы лучше рассказали про реализацию ваших cookie.set('bla', 'blabla') и cookie.get('bla') глядишь и пригодиться кому…
        –1
        Посмотрел код — чистенько все, опрятно, хорошо
          0
          Как-то ваш cookie.get() не очень красивый. Я вот какой использую:
            0
            get: function (n)
            {
            var r = new RegExp("(.*?"+n+"=)(.*?)((;.*)|$)");
            var c = document.cookie;
            if (c.match( r ))
            {
            return c.replace(r, "$2");
            } else {
            return "";
            }
            }
              +1
              Я для себя тестировал, с регэкспами медленнее работает :)
                +2
                скажите, в каком месте может понадобиться многократное обращение к кукам? настолько многократное, что RegExp начинает влиять на производительность?
                  +2
                  Собственно это мой бзик, на всякий який, а вдруг понадобиться:)))) Сказать, где такое понадобится — не скажу!

                  Я реализовал так, лишь потому, что по моим тестам вышло быстрее, и я посчитал значит так тому и быть.
              –1
              Извините, не было цели угодить всем и вся!

              Я же сказал, писал для себя, просто решил выложить. И можно же пост читать повнимательнее, я же написал что для тех кто еще не в теме.
                0
                Зачем так бурно реагировать, я лишь хотел показать альтернативный вариант.
              +1
              Этому коду есть куда развиваться: пока ещё недостаёт минимализма.

              Вспомните, как в jQuery одна и та же функция $(element).html() без параметров возвращает код HTML внутренностей некоторого элемента, а с параметром — заменяет код HTML на значение параметра. Вот минимализм!

              Так и тут можно было бы упромыслить:
              cookie('cookieName', 'cookieValue');     // присвоение значения

              if (var option = (cookie('optionName') || defaultOptionValue) ) {...     // использование значения
              И никаких set() и get().
                0
                Что то в этом есть, спасибо за идею!
                  +1
                  Кстати, под jQuery есть плагин для работы с cookie, там всё именно так и есть.
                    –1
                    Я вообще-то написал о популярных фреймворках, прочтите в теле поста!
                      0
                      Так я ведь не тело поста комментирую! :)

                      Но формально Вы правы, этот момент я как-то упустил.
                  +1
                  function getCookie(name){
                  var bOut = false;
                  return unescape(document.cookie.replace(/([^ ;=]+)=?([^;]+)?;?/g,function(m,n,v){
                  if (n==name && !bOut) {
                  bOut = true;
                  return v;
                  } else {
                  return '';
                  }
                  }));
                  }
                  у меня вот такой монстрик по проектам кочует… как-то написал и вдруг пригодилось

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

                  Самое читаемое