Почему HTML, хранящееся в localStorage, изменяется при вызове и отображении в браузере? - PullRequest
Новая
       86

Почему HTML, хранящееся в localStorage, изменяется при вызове и отображении в браузере?

1 голос
/ 05 августа 2020

Извините, если об этом спрашивали раньше, я искал, но не нашел ничего подходящего ...

У меня здесь очень простой сайт с 3 кнопками:

  1. Добавить компонент

  2. Сохранить текущее состояние

  3. Восстановить сохраненное состояние

Кнопка Добавить компонент делает именно то, что я хочу, а именно создает новый простой элемент свертывания в тегах <div data-role="collapsible-set" class="flow" id="collapsibleComponent"></div>.

Collapsible component created and added to the page properly

Also, the Save Current State storeCurrentState(); button seems to capture the required code identically to what's being displayed (which is correct).

However, when I click the Restore Saved State button (run the restorePriorState(); method), the code that is read from the localStorage and put back into the page is not consistent with the code that was saved. As a result I end up with a nested looking collapsed item like below...

clustered mess

<!DOCTYPE html>

    
        
        TutorialW3a

1 Ответ

1 голос
/ 07 августа 2020

Вы спрашиваете «Почему», поэтому вот ответ:

JQM - это смешанная структура JS / CSS, т.е. widgets расширены JS и стилизованы CSS . После инициализации страницы виджеты (идентифицируемые тегом «data-role») расширяются платформой путем добавления некоторых вложенных элементов (div, span), pseudo-elements (значки) и обработчиков событий.

Тем не менее, в вашем коде вы сохраняете расширенную версию своей начальной разметки вместе с атрибутом data-role, но вы сохраняете только разметку , это означает, что вы не сохранит JS data, который будет создан фреймворком во время инициализации виджета. Короче говоря, вы сохраняете только половину уже улучшенного виджета.

В следующий раз структура снова найдет атрибут data-role, но не связанный с ним объект data, и вызовет $("#new").collapsible(); В результате вы получите эту разметку с двойной вложенностью.

Дополнительная информация:

Вы можете взглянуть на объект виджета JQM следующим образом: 

$.data(document.getElementById("new"),"mobile-collapsible")

или: 

$("#new").jqmData("mobile-collapsible")

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

Возможно, вы можете восстановить исходную неулучшенную разметку: 

$("#collapsibleComponent :jqmData(role='collapsible')").collapsible("destroy");

и сохранить это: 

localStorage.setItem("html_data", JSON.stringify($("#collapsibleComponent").html()));

Наконец, вы предполагаете, что

для захвата требуемого кода, идентичного отображаемому, правильно

неверно.

...