Сохранение элемента html в localStorage и вывод

137

28 мая 2019, 10:30

Есть метод, который добавляет новые div на страницу.

function add_element() {
        var parent = document.getElementById('component');
        var newelem = document.createElement('form');
        var title = document.createElement('input');
        var content = document.createElement('input');
        newelem.appendChild(title);
        newelem.appendChild(content);
        parent.appendChild(newelem);
        save_element();

        function save_element(){
            const parsed = JSON.stringify(parent);
            localStorage.setItem('hiDen', parsed);
        }
    }
        function get_element() {
            return JSON.parse(localStorage.getItem('hiDen'));
        }
    window.add = add_element;
    window.get_el = get_element;

html-код в боди

<div>
<form>
    <input type="button" id="button_modal" value="Добавить" onclick="modal_open()"/>
</form>
</div>
 <div id="component">
 </div>
<div class="modal" id="modalDialog">
<form method="post" name="modalwindowpush">
    <input type="text" name="title">
    <input type="text" name="content">
</form>
<input type="submit" value="Закрыть" onclick="modal_close()">
<input type="button" value="Сохранить" onclick="add(); get_el()">
</div>

Функции javascript прописаны в head (Привожу только одну из них- имеющую значение для ситуцации). Если имеет значение - кнопка "Сохранить" в модальном окне страницы. Но после перезагрузки страницы новые div пропадают. Что я делаю не так? Имеет ли значение, что это JSP-страница?

Answer 1

Проблема в том, что вы пытаетесь DOM элемент преобразовать с помощью JSON.stringify. Попробуйте сделать что то подобное:

function save_element(){
   const html = parent.innerHTML; //или целиком parent.outerHTML
   localStorage.setItem('hiDen', html);
}

Исходя из вопроса, на основе вашего кода:

var parent = document.getElementById('component');
function add_element() {
        var newelem = document.createElement('form');
        var title = document.createElement('input');
        var content = document.createElement('input');
        newelem.appendChild(title);
        newelem.appendChild(content);
        parent.appendChild(newelem);
        save_element();
        function save_element(){
            const parsed = parent.innerHTML;
            localStorage.setItem('hiDen', parsed);
        }
    }
function get_element() {
    parent.innerHTML = localStorage.getItem('hiDen');
}
//сохраняете ваш элемент
add_element();
//выводите
get_element();

Взгляните пример: jsfiddle.net/mcuk4avf

Нажимаете "Добавить элемент"
Перезагружаете страницу
Нажимаете "Получить элемент" - элемент вставлен
Нажимаете "Очистить хранилище"
Перезагружаете страницу
Нажимаете "Получить элемент" - элемента в хранилище больше нет.
Можете повторить пункт 1.

Обновлено:

Так как вы сказали, что у вас JSP-страница(с этим я вам не помогу), то вы должны понимать, где и как генерируется ваша страница.

Вот ответ почему у вас не работает код:

https://stackoverflow.com/questions/42568167/how-to-display-localstorage-values-on-jsp

Далее вы сами должны переписать ваш код, чтобы обращаться к localStorage в браузере, а не на сервере.

Answer 2

А ларчик просто отрывался - Я разворачивал локальный хост. А при взаимодействии клиента с локальным хостом localStorage не работает. Прошу прощения за то, что отвлек внимание на такую ерунду.