Как сохранить созданные элементы в Cookies или localStorage, используя JavaScript? - PullRequest
Новая
       13

Как сохранить созданные элементы в Cookies или localStorage, используя JavaScript?

0 голосов
/ 15 ноября 2018

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

function showTab(ev) {
    let head = document.getElementById('heading');
    let node = document.createElement("a"); 
    node.classList.add("tab");
    node.appendChild(document.createTextNode(ev.target.innerHTML));
    head.appendChild(node); 
};

Ответы [ 3 ]

0 голосов
/ 15 ноября 2018

Вы можете сохранить outerHTML созданного элемента в localStorage и получить его при загрузке страницы 

var node = document.createElement("a");
node.classList.add("tab");
node.textContent = "new tag";     

var local = localStorage.getItem("html");
if (local == null){
  localStorage.setItem("html", node.outerHTML);
  console.log('HTML setted in localStorage');
} else
    console.log(local);

Поскольку localStorage не работает во фрагменте, вы должны проверить его в jsfiddle

Обратите внимание, что если ваш html контент большой, вы должны учитывать максимальный размер локального хранилища

0 голосов
/ 15 ноября 2018

Хорошо, я решил это так: 

// Restore

window.onload = function() {
let head = document.getElementById('heading');
archive = [];
key = allStorage();

for(var i=0; i<archive.length; i++){ 
    if(archive[i] != null){
        let node = document.createElement("a");
        node.classList.add("tab");
        node.innerHTML = key[i];

        head.appendChild(node);
    }
}
}


//Store all

function allStorage() {
keys = Object.keys(localStorage);           // Gibt alle Schlüssel zurück
archive = [];

for (var i=0; i< keys.length; i++) {
    archive.push(keys[i]);
}
return archive;
}
0 голосов
/ 15 ноября 2018

Печенье, вероятно, не правильный путь, чтобы сделать что-то вроде этого, поскольку есть ограничения по размеру

Лучше было бы хранить добавленные элементы в браузере localStorage или indexedDB . Вы можете увидеть пример последнего в этом простом приложении todo: http://todomvc.com/examples/react/#/

Если вы проверите localStorage в этом примере todo после добавления некоторых элементов, вы увидите, что существует массив, содержащий ваши записи в формате JSON.

В зависимости от того, какой тип информации вам нужно сохранить, вы можете либо сохранить HTML-код напрямую, либо сохранить JSON, содержащий соответствующую информацию (имя вкладки, URL-адрес ссылки и т. Д.).

Я бы рекомендовал не сохранять HTML-код напрямую, если вам когда-нибудь понадобится внести изменения в HTML-код на вашем сайте. Ваши пользователи будут загружать устаревший HTML.

...