1

Есть метод, который добавляет новые 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-страница?

0

2 ответа 2

3

Проблема в том, что вы пытаетесь 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. Нажимаете "Добавить элемент"
  2. Перезагружаете страницу
  3. Нажимаете "Получить элемент" - элемент вставлен
  4. Нажимаете "Очистить хранилище"
  5. Перезагружаете страницу
  6. Нажимаете "Получить элемент" - элемента в хранилище больше нет.
  7. Можете повторить пункт 1.

Обновлено:

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

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

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

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

7
  • Cпасибо, но, к сожалению, не помогло...
    – Jelly
    4 дек 2018 в 20:41
  • Вы же понимаете, что тогда JSON.parse также не нужно использовать. и даже исходя из вашего кода не совсем понятно как вы используете сохраненные данные в localStorage? С какой целью выполняется get_element()?
    – Doigrales
    4 дек 2018 в 20:46
  • Doigrales, конечно, я сразу же get_element() реализовал в таком виде, в каком Вы привели. Но, все равно, не сработало. Я не понимаю... Это уже второй случай, когда мне предлагают решение на javascript на форумах, но оно не срабатывает. Может, дело в настройках среды разработки? И, кстати, вынос var parent за scope функции не позволяет добавить элемент в данном случае.
    – Jelly
    5 дек 2018 в 18:39
  • Во-первых, ваш код, возможно, вырван из контекста и мы не знаем всех подробностей. Взгляните на работу вашего кода: jsfiddle.net/mcuk4avf и, по-моему, все прекрасно работает.
    – Doigrales
    5 дек 2018 в 19:08
  • Я выложил контекст из боди html. Стили оставшиеся функции из head не приводил, чтобы не загромождать.
    – Jelly
    5 дек 2018 в 20:43
0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.