Как добавить outerHTML в куки?

261

06 марта 2018, 05:47

Как добавить HTML код определенных элементов в куки?Точнее есть генератор который при нажатии генерирует div элемент с рандомным цветом и в рандомный месте. Надо реализовать кнопку "Сохранить", эта кнопка должна сохранять количество,цвет и местоположение всех div элементов в куки(это обязательно). Пробовал сохранить HTML код элементов,но сохраняется только первые 20 символов. Как быть? `var

 btn = document.getElementById('btn');
var divMove = document.querySelectorAll('div'),
    divList = [],
    osX = 0,
    osY = 0,
    ae;
getRandom = (min, max) => {
  return Math.round(Math.random() *(max - min) + min);
};
function setCookie(elem){
  document.cookie = `name=${elem}`;
}
btn.addEventListener('click',() => {
  var div = document.createElement('div');
  divMove = document.querySelectorAll('div');
  div.style.position = 'absolute';
  div.setAttribute('data-random','true');
  div.style.width = getRandom(10,window.innerWidth/2) + 'px';
  div.style.height = getRandom(10,window.innerHeight/2) + 'px';
  div.style.top = getRandom(0,window.innerHeight) + 'px';
  div.style.left = getRandom(0,window.innerWidth) + 'px';
  div.style.backgroundColor = 'rgb(' + getRandom(0,255) + ',' + getRandom(0,255) + ',' + getRandom(0,255) + ')';
  divList.push(div.outerHTML);
  setCookie(divList);
  drag(div);
  document.body.appendChild(div);
});
function drag(div){
  var mUp = () => {
    ae = null;
  };
  var mMove = (e) => {
    if(ae){
      ae.style.top = (e.clientY - osY) + 'px';
      ae.style.left = (e.clientX - osX) + 'px';
    }
  };
  div.addEventListener('mousedown', (e) => {
    ae = e.target;
    osX = e.offsetX;
    osY = e.offsetY;
  });
  div.addEventListener('mouseup', () => {
      mUp();
  });
  document.addEventListener('mousemove', (e) => {
      mMove(e);
    });
}`

Answer 1

Вам нужно экранировать знак ";" (которым разделяются поля в каждой "куке")

Как указал выше @Sergey Glazirin, лучше для хранения использовать localStorage, там не будет проблем с ";". А ещё лучше было бы сохранять не строки, а сами данные - свойства и их значение в виде JSON:

{
    objects: [
        {
            tag: 'div',
            position: 'absolute',
            width: 146,
            height: 22,
            background-color: 'rgb(131, 45, 3)',
            data-random:'true'
        }
    ]
}

btn = document.getElementById('btn'); 
var divMove = document.querySelectorAll('div'), 
    divList = [], 
    osX = 0, 
    osY = 0, 
    ae, 
    Serializer = new XMLSerializer(); 
 
getRandom = (min, max) => { 
  return Math.round(Math.random() *(max - min) + min); 
}; 
 
 
function createCookie(name,value,days) { 
	if (days) { 
		var date = new Date(); 
		date.setTime(date.getTime()+(days*24*60*60*1000)); 
		var expires = "; expires="+date.toGMTString(); 
	} 
	else var expires = ""; 
	document.cookie = name+"="+value+expires+"; path=/"; 
} 
 
btn.addEventListener('click',() => { 
  var div = document.createElement('div'); 
  divMove = document.querySelectorAll('div'); 
  div.style.position = 'absolute'; 
  div.setAttribute('data-random','true'); 
  div.style.width = getRandom(10,window.innerWidth/2) + 'px'; 
  div.style.height = getRandom(10,window.innerHeight/2) + 'px'; 
  div.style.top = getRandom(0,window.innerHeight) + 'px'; 
  div.style.left = getRandom(0,window.innerWidth) + 'px'; 
  div.style.backgroundColor = 'rgb(' + getRandom(0,255) + ',' + getRandom(0,255) + ',' + getRandom(0,255) + ')'; 
  var str = div.outerHTML; 
  str = str.replace(/;/g, '|:') 
  divList.push(str); 
  createCookie('test', divList); 
  drag(div); 
  document.body.appendChild(div); 
}); 
 
function drag(div){ 
  var mUp = () => { 
    ae = null; 
  }; 
 
  var mMove = (e) => { 
    if(ae){ 
      ae.style.top = (e.clientY - osY) + 'px'; 
      ae.style.left = (e.clientX - osX) + 'px'; 
    } 
  }; 
  div.addEventListener('mousedown', (e) => { 
    ae = e.target; 
    osX = e.offsetX; 
    osY = e.offsetY; 
  }); 
 
  div.addEventListener('mouseup', () => { 
      mUp(); 
  }); 
  document.addEventListener('mousemove', (e) => { 
      mMove(e); 
    }); 
}

<input id="btn" type="button">Click me</input>

Обратите внимание на

str = str.replace(/;/g, '|:')

Тут |: взято как пример. При чтении вам нужно будет конвертировать обратно |: в ;

Пример на JSFiddle

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Организация JS кода с Webpack

Есть сайтик на phpВстал вопрос организациии js

259

javascript

jQuery: как избежать глобальных переменных в калькуляторе?

Калькулятор состоит из нескольких чекбоксов, ползунков и селектовИ в принципе работает, но обновление результатов происходит только после...

219

javascript

Настройка Slick слайдера

Всем "Зраствуйте"! У меня проблема: мне нужно настроить slick slider таким образом, чтобы он автоматически прокручивался до последнего слайдера...

238

javascript

Расширения Chrome DevTools network без открытия панели devtools

Делаю расширение для Google Chrome, которое должно парсить запросы

233