Как сохранить массив или объект в 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)
01.12.2019, 11:51 [2079 просмотров]