Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Организация категорий товаров || Как установить форум >>>

Массив в Cookie

20.06.2012
Массив в Cookie

Здравствуйте, уважаемые читатели блога LifeExample, сегодня будем заниматься сохранением массива в cookie. Я предлагаю подойти к этой задачи с двух сторон. Для начала разберем, как записать массив в cookie с помощью PHP, а затем попробуем сделать то же самое действие с помощью JavaSсript и jQuery.

Возможно, у неопытных программистов появится вопрос, зачем может понадобиться записывать массив в cookie.

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

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

Массив в cookie с помощью PHP

Вспомним, что куки не позволяют хранить в себе структурированные данные, все что представляется возможным это сохранять пары "Ключ : Значение".

Перед тем как приступить к практике я хочу, чтобы вы вспомнили статью "Формат JSON", она как нельзя лучше сочетается с темой записи массива в cookie, поскольку именно в ней изложено как, представлять сложные структуры данных сериализированной строкой.

Имея конвертированный в строку массив, мы без труда сможем сохранить его в cookies.

И так, пример сохранения настроек фильтра в куки на php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?
 $array = array(
     array(
     "name"=>"Основные",
     "field"=>"email",
     "sortdir"=>1,
     "search"=>""
     ),
     array(
     "name"=>"Архив",
     "field"=>"Дата",
     "sortdir"=>-1,
     "search"=>""
     ),
 );
$json = json_encode($array);
 setcookie ("filter", $json);
 ?>

Как видите, я использовал многомерный массив, и тем не менее он был успешно занесен в куки в виде вот такой страшной записи:

1
[{"name":"\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435","field":"email","sortdir":1,"search":""},{"name":"\u0411\u0435\u0437 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430","field":"\u0414\u0430\u0442\u0430","sortdir":-1,"search":""}]

Проверить успешность записи массива в cookie, можно средствами браузера или выполнив строку кода:

1
echo $_COOKIE['filter'];

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

1
2
3
4
$array = json_decode($_COOKIE['filter'], true); //возвращаем массиву рабочее состояние
echo "<pre>";
print_r($array); // выводим массив для  проверки
echo "</pre>";

Массив в cookie с помощью jQuery

Опять же призываю внимательно почитать материал статьи "Формат JSON", там можно найти решение для сохранения массива и других структур данных в cookie, но так как заголовок гласит о работе с помощью библиотеки jQuery, я опишу именно этот метод.

Для работы с куками в jQuery предусмотрен плагин jquery.cookie.js (скачать можно будет в конце статьи вместе с исходниками)

Для осуществления задуманного, нам понадобится подключить саму библиотеку jQuery и плагин для работы с cookie. Я сразу приведу готовый кусок кода а затем разберем все по полочкам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(document).ready(function(){              
    var dataFilter=$.cookie('filter'); // получаем сохраненные ранее настройки            
    var filter = eval(dataFilter); //конвертируем строку в массив             
    // тестируем работу с массивом из cookie
    text = "Фильтр:"
    +"\n-"+filter[1]['name']
    +"\n-"+filter[1]['field']
    +"\n-"+filter[1]['sortdir']
    +"\n-"+filter[1]['search'];
    alert(text);               
    // изменяем данные и обратно сохраняем массив в cookie
    filter[1]['name']="Без договора"
    filter[1]['sortdir']="1";  
    filter[1]['search']="900";                 
    filter=JSON.stringify(filter);//конвертирование в строку             
    $.cookie('filter',filter );//запись в куки                  
    });
</script>

Собственно по полочкам все разобрано в комментариях, поэтому мне остается лишь подтвердить написанное. С помощью плагина jquery.cookie.js, мы получаем значение записи с ключом filter, затем преобразуем полученную строку в JavaScript массив и в дальнейшем выводим некоторые из его полей, а также устанавливаем новые значения и записываем массив обратно в cookie.

Ну, вот теперь мы знаем как можно работать с массивом полученным из cookie, изменять его значения и записывать обратно. Уверяю вас эти скромные знания полученные сегодня еще не раз пригодятся вам в будущем.

Для тек кто хочет работать исключительно в JS и иметь возможность сохранять массив в cookie, а также добавлять в него элементы и редактировать их, я выкладываю следующий скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){              
    var arr = schitivaem_massiv(); // получаем массив из куков
    alert(arr.length);// выводим количество элементов
    //добавляем в конец массива новую записть (Можно добавить указать любые ключи и значения)
    dobavlyaem_v_massiv({
    "name":"Новая группа",
    "field":"Имя",
    "sortdir":-1,
    "search":""
    });
});
                   
// запись елемента массива в cookie  
function dobavlyaem_v_massiv(obj){                 
    var arr = schitivaem_massiv();//получаем текущее состояние массива
    arr[arr.length]=obj; //добавляем элемент в конец
    var str = JSON.stringify(arr);//конвертируем в строку                   
    $.cookie('arr',str);//записываем массив в куки
}
                               
function schitivaem_massiv(){
    var dataArr=$.cookie('arr');//считываем данные из куков  
        //если массив небы обнаружен, иницилизируем его
        if(dataArr===null){
         dataArr = inicializiruem_massiv();
        //возвращаем инициализированный пустой маасив
         } 
    //возвращаем полученный массив
    return JSON.parse (dataArr);
}
               
//другими словами создаем пустой массив
function inicializiruem_massiv(){          
    var str = JSON.stringify(new Array());//конвертируем в строку                   
    $.cookie('arr',str);//записываем массив в куки
    return str1;
}

Этот код демонстрирует, то как можно создавать ассоциативные записи и сохранять их в одну куку.

Обратиться к каждому из ключей после считывания массива из куков можно будет таким образом:

1
2
3
4
5
6
alert(arr[0]. name);
alert(arr[0]. field);

alert(arr[1]. name);
alert(arr[1]. field);
и.тд.

Каждый раз при обращении к скрипту, массив из cookie будет попадать на обработку и дополняться новым элементом. Не сложно будет модернизировать код таким образом, чтобы контролировать запись и изменение параметров.

Скачать исходный код ( Скачали: 645 чел. ) 

Уверен, что эти функции будут полезны многим и явятся основой для решения поставленных задач.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Подписаться на RSS
Нравится
,
jQuery & JavaScript примеры

Комментарии

  • Анатолий
    19.12.2014

    Ваш пример не работает. В функции «инициализируем массив» опечатка в переменной в возвращаемом значении, должно быть return str, у Вас же return str1. Но даже после исправления этой ошибки, массив всё-равно null и скрипт не считывает/не записывает куки. В общем пример для новичков бесполезный.

    Ответить
    • Ахмаджон
      05.05.2015

      Добрый день,
      Если вы нашли решение можете им поделится, так как автор забыл про пост((

  • php proger
    13.03.2019

    А не проще воспользоваться serialize();
    Пример:
    $array = [‘1′,’2′,’qwerty’];
    $q = serialize($array);
    setcookie(‘q’,$q);
    print_r (unserialize($_COOKIE[‘q’]));

    Ответить

    • Оставить комментарий

    Подписаться на комментарии к этой статье по RSS

    Публикации
    Избранное
    Яндекс.Метрика