Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Cookies в массив JS и обратно
 
 автор: Eugene77   (02.11.2009 в 17:03)   письмо автору
 
 

Здравствуйте!
На странице около дюжины чекбоксов. Они не предназначены для передачи через POSТ или через GET. Они должны передаваться серез COOKIES.
Связывать с каждым чекбоксом отдельную куку не хочется - можно выйти за допустимые пределы по количеству печенья.
Значит надо чтобы состояние всех чекбоксов запоминалось посредством JS в одной куке, и обратно:
То есть чтобы при загрузке страницы, чекбоксы расставлялись в соответствии с тем, что есть в куке. А по мере кликания по чекбоксам - изменялась кука.

  Ответить  
 
 автор: Sergeich   (02.11.2009 в 18:40)   письмо автору
 
   для: Eugene77   (02.11.2009 в 17:03)
 

Может, проще через обычную переменную (массив)? Изначальные COOKIES чем устанавливаются? РНР? JavaScript? Лучше просто продумать все возможные варианты и сохранять в COOKIES лишь определенное значение, а все остальное будет герерироваться скриптом в зависимости от этого значения.

  Ответить  
 
 автор: Eugene77   (02.11.2009 в 19:29)   письмо автору
 
   для: Sergeich   (02.11.2009 в 18:40)
 

>Может, проще через обычную переменную (массив)?
Нет, иначе никак не получается. То есть я не против массива, даже скорее всего надо какой-то JS массив вводить, проблема в том, что переходы с данной страницы возможны в разных направлениях, но надо, чтобы при возвращении на неё чекбоксы были сохранины. На PHP этого в общем случае не сделать.

>Изначальные COOKIES чем устанавливаются? РНР? JavaScript?
Изначальные (по умолчанию) значения прописаны в шаблоне страницы.

>Лучше просто продумать все возможные варианты и сохранять в COOKIES лишь определенное значение, а все остальное будет герерироваться скриптом в зависимости от этого значения.

Поскольку я чуть лучше ориентируюсь в PHP, чем в JS, я к такому подходу обычно и склоняюсь.
Но в данном случае, слишком много вариантов действий посетителя делают этот подход нереальным.

Кажется, чего бы проще: написать функцию простой синхронизации некой куки и чекбоксов, но пока не справляюсь с синтаксисиом JS.

  Ответить  
 
 автор: АЯ   (03.11.2009 в 04:02)   письмо автору
 
   для: Eugene77   (02.11.2009 в 19:29)
 

В куки вы можете записать СТРОКУ.
Например, такую: 100010110010, где всего символов - 12 (по количеству чекбоксов), а состояние каждого определено двоичным кодом: 1 - есть галочка, 0 - нет галочки.

1. Сразу после загрузки страницы читаете куки, сплитуете строку с разделителем "пустота", получая массив из нулей и единиц. "Пробегаете" по всем чекбоксам и отмечаете их в соответствии с сохраненным в куках значением состояния.

2. При клике на какой-либо чекбокс "пробегаете" скриптом по всем чекбоксам, узнаёте состояние каждого из них, составляете новую строку и сохраняете её в куках.

Примечание 1: Браузер "пробегает" коллекцию getElementsByTagName ('input') от нулевого инпута и до последнего ВСЕГДА ИМЕННО В ТОМ ПОРЯДКЕ, в котором в HTML-коде эти инпуты прописаны.

Примечание 2: Так как в HTML-коде у вас вполне могут быть и какие-либо иные инпуты (не чекбоксы, а, например, текстовые, радио и прочие), то перед тем как "узнать состояние" ("установить состояние"), надо проверить тип инпута - if (инпут.type == 'checkbox'). Слово 'checkbox' в JS-коде должно быть написано в том же регистре, что и в HTML-коде.

  Ответить  
 
 автор: Eugene77   (03.11.2009 в 05:51)   письмо автору
 
   для: АЯ   (03.11.2009 в 04:02)
 

Спасибо!
Так, наверно и надо было бы сделать, но я всё-таки нагуглил готовый JS для этих целей:

<body onload="restorePersistedCheckBoxes()">
    <input type="checkbox" id="check1" onclick="persistCheckBox(this)" />
    <input type="checkbox" id="check2" onclick="persistCheckBox(this)" />
    <input type="checkbox" id="check3" onclick="persistCheckBox(this)" />
    <input type="button" value="Check cookie" 
           onclick="alert(document.cookie)" />
    <input type="button" value="Clear cookie"
           onclick="clearPersistenceCookie()" />

    <script type="text/javascript">
        // This function reads the cookie and checks/unchecks all elements
        // that have been stored inside. It will NOT mess with checkboxes 
        // whose state has not yet been recorded at all.
        function restorePersistedCheckBoxes() {
            var aStatus = getPersistedCheckStatus();
            for(var i = 0; i < aStatus.length; i++) {
                var aPair = aStatus[i].split(':');
                var el = document.getElementById(aPair[0]);
                if(el) {
                    el.checked = aPair[1] == '1';
                }
            }
        }

        // This function takes as input an input type="checkbox" element and
        // stores its check state in the persistence cookie. It is smart
        // enough to add or replace the state as appropriate, and not affect
        // the stored state of other checkboxes.    
        function persistCheckBox(el) {
            var found = false;
            var currentStateFragment = el.id + ':' + (el.checked ? '1' : '0');
            var aStatus = getPersistedCheckStatus();
            for(var i = 0; i < aStatus.length; i++) {
                var aPair = aStatus[i].split(':');
                if(aPair[0] == el.id) {
                    // State for this checkbox was already present; replace it
                    aStatus[i] = currentStateFragment;
                    found = true;
                    break;
                }
            }
            if(!found) {
                // State for this checkbox wasn't present; add it
                aStatus.push(currentStateFragment);
            }
            // Now that the array has our info stored, persist it
            setPersistedCheckStatus(aStatus);
        }

        // This function simply returns the checkbox persistence status as
        // an array of strings. "Hides" the fact that the data is stored
        // in a cookie.
        function getPersistedCheckStatus() {
            var stored = getPersistenceCookie();
            return stored.split(',');
        }

        // This function stores an array of strings that represents the 
        // checkbox persistence status. "Hides" the fact that the data is stored
        // in a cookie.
        function setPersistedCheckStatus(aStatus) {
            setPersistenceCookie(aStatus.join(','));
        }

        // Retrieve the value of the persistence cookie.
        function getPersistenceCookie()
        {
          // cookies are separated by semicolons
          var aCookie = document.cookie.split('; ');
          for (var i=0; i < aCookie.length; i++)
          {
            // a name/value pair (a crumb) is separated by an equal sign
            var aCrumb = aCookie[i].split('=');
            if ('JS_PERSISTENCE_COOKIE' == aCrumb[0]) 
              return unescape(aCrumb[1]);
          }
          return ''; // cookie does not exist
        }

        // Sets the value of the persistence cookie.
        // Does not affect other cookies that may be present.
        function setPersistenceCookie(sValue) {
            document.cookie = 'JS_PERSISTENCE_COOKIE=' + escape(sValue);
        }

        // Removes the persistence cookie.
        function clearPersistenceCookie() {
            document.cookie = 'JS_PERSISTENCE_COOKIE=' +
                              ';expires=Fri, 31 Dec 1999 23:59:59 GMT;';
        }
    </script>

</body>


Пожалуй, раз уж он нашёлся (я уже и не надеялся) я им воспользуюсь.

Только не могли бы вы подсказать как из него сделать класс?
Я совсем недавно прошёл классы в PHP (и мне понравилось), а как делают классы в JS - у меня даже книжки такой нет. Но прицип, наверно, тот же. Мне бы только синтаксис увидеть!
Помогите переписать этот набор функций в класс, скажем, "PersistentCheckBox"

Ну, или хотя бы начать: определить волшебные методы, показать как класс в отдельном файле располагается, как он подключается в JS.

  Ответить  
 
 автор: Sergeich   (03.11.2009 в 11:56)   письмо автору
 
   для: Eugene77   (03.11.2009 в 05:51)
 

>Пожалуй, раз уж он нашёлся (я уже и не надеялся) я им воспользуюсь.
>
>Только не могли бы вы подсказать как из него сделать класс?
>Я совсем недавно прошёл классы в PHP (и мне понравилось), а как делают классы в JS - у меня даже книжки такой нет. Но прицип, наверно, тот же. Мне бы только синтаксис увидеть!
>Помогите переписать этот набор функций в класс, скажем, "PersistentCheckBox"
>
>Ну, или хотя бы начать: определить волшебные методы, показать как класс в отдельном файле располагается, как он подключается в JS.

Понятия класса в JavaScript нет. Есть понятие прототипа.
Сделать это можно так:
function a()
{
     this.b = 12;
     this.c = 15;
     this.d = function()
                   {
                         alert("Prototype");
                   }
    this.e = "Class";
}


Вызвать метод можно так:

var x  = new a();
x.d();


Есть еще и другие способы...
Только есть ли целесообразность в создании объектов? Это может иметь смысл, если создается общий объект, который можно использовать неоднократно в различных проектах. Если же он создается только для конкретной цели и будет использоваться только в одном проекте для которого он и написан, то это просто лишняя трата времени.

  Ответить  
 
 автор: Eugene77   (03.11.2009 в 19:54)   письмо автору
 
   для: Sergeich   (03.11.2009 в 11:56)
 

У меня получается много JS на странице. Я боюсь что одно начнёт интерферировать с другим.
Это не повод? Я думал, что повод.

В перспективе страница будет ещё пополняться JS. Чтобы это можно было делать без страха, я и хотел как-то всё инкапсулировать. Что бы посоветуете?

  Ответить  
 
 автор: АЯ   (03.11.2009 в 21:23)   письмо автору
 
   для: Eugene77   (03.11.2009 в 19:54)
 

>"Я боюсь что одно начнёт интерферировать с другим...
Чтобы это можно было делать без страха"


Интерферируют исключительно ВОЛНЫ.
Насколько я знаю Javascript - он "волновыми свойствами" не обладает:-)

"Волков бояться - в лес не ходить" (с)

  Ответить  
 
 автор: Eugene77   (04.11.2009 в 19:34)   письмо автору
 
   для: АЯ   (03.11.2009 в 21:23)
 

Было такое утверждение (приписывают Максу Планку):
"Всё обладает волновыми свойствами" :-)

Спасибо!

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования