БлогNot. Как сохранить массив или объект в cookies

Как сохранить массив или объект в cookies

В этой статье для сохранения нескольких "ключиков" cookies мы применяли отдельные скалярные переменные. Не сложнее будет сохранить и составное значение, такое как массив или объект. Мы должны будем сцепить массив или объект в строку перед сохранением, а потом после чтения расцепить обратно, при необходимости также клонируя прочитанные данные в массив или объект внутри нашего скрипта.

Вот пример, который можно сохранить и выполнить как файл .html в кодировке Юникода utf-8, помня, что не все браузеры разрешают работать с cookies локальным файлам, открытым через файловую систему, а не по протоколу HTTP (см. в статье по ссылке выше).

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

<!DOCTYPE html>
<html lang="ru">
 <head>
 <meta charset="utf-8">
 <title>cookiesArray</title>
 </head>
 <body>

 <div id="myDiv"></div>

 <script>
  (function (myDiv) {
   var separator = "\t"; //разделитель
   var cookieName = "myArr"; //имя куки массива
   var arr = [1,2,3,4,5]; //данные скрипта в виде массива
   var cookieName2 = "myArr2"; //имя куки объекта
   var obj = { name: "Моё имя", data: "Мои данные" }; //данные скрипта в виде объекта

   var divId = document.getElementById (myDiv);
   var divArr = document.createElement('div');
   divId.appendChild (divArr);
   var divBtns = document.createElement('div');
   divBtns.innerHTML =  '<input type="button" id="btnSave" value="Сохранить"> '+ "\n" +
                        '<input type="button" id="btnReload" value="Перезагрузить">';
   divId.appendChild (divBtns);
   document.getElementById("btnSave").addEventListener ("click", function(e) { saveMe(); });
   document.getElementById("btnReload").addEventListener ("click", function(e) { reloadMe(); });

   function setCookie (name, value, expires) {
    let c = name + "=" + escape(value)+
     (expires ? "; expires="+expires.toGMTString() : "");
    document.cookie = c; //Ограничение 4 Кб!
   }
  
   function getCookie (name) {
    let p = name+"=";
    let i1 = document.cookie.indexOf(p);
    if (i1 == -1) return null;
    let i2 = document.cookie.indexOf(";",i1 + p.length);
    if (i2 == -1) i2 = document.cookie.length;
    return unescape(document.cookie.substring(i1 + p.length,i2));
   }
  
   function fixDate(date) {
    let base = new Date (0);
    let t = base.getTime();
    if (t > 0) date.setTime(date.getTime()-t);
   }

   function saveMe () {
    let now = new Date();
    fixDate(now);
    now.setTime(now.getTime()+5*365*24*60*60*1000);
    //Сохраняем cookie-массив:
    let c = arr.join(separator);
    setCookie(cookieName,c,now);
    //Сохраняем cookie-объект:
    let d = JSON.stringify(obj);
    setCookie(cookieName2,d,now);
   }

   function reloadMe () {
    location.reload(true);
   }

   window.addEventListener('load', function(e) {
    //Читаем cookie-массив:
    let c = getCookie(cookieName);
    if (c==undefined || c=='') return;
    arr = c.split(separator).slice(0); 
      //сохранили физическую копию данных во внешнем массиве
    //Читаем cookie-объект:
    let d = getCookie(cookieName2);
    if (d==undefined || d=='') return;
    obj = Object.assign(JSON.parse(d));
     //сохранили физическую копию данных во внешнем объекте
    //Вывод того, что получилось: 
    divArr.innerHTML = arr+"<br>"+JSON.stringify(obj);
   });
   
  }("myDiv"));
 </script>
 <noscript>
  <p>Требуется JavaScript для работы приложения!</p>
 </noscript>
 </body></html>

В консоли браузера мы можем увидеть, что куки действительно создано всего две. Также пример показывает некоторые тонкости обращения с составными объектами - как "физически", а не по ссылке скопировать массив (arr.slice(0)) и объект (Object.assign(obj)), как преобразовать массив и объект в строку (arr.join(separator), JSON.stringify(obj)) и обратно (string.split(separator), JSON.parse(string)).

Cookies примера в консоли браузера Firefox (Ctrl+Shift+K)
Cookies примера в консоли браузера Firefox (Ctrl+Shift+K)

теги: javascript программирование

01.12.2019, 11:51; рейтинг: 23