Сохранение в localStorage из файла импорта HTML
Я использую импорт HTML, как средство для динамического добавления контента на сайт. Это работает, отлично, есть хорошая статья, которая разоблачает использование импорта как для файлов, так и для шаблонов.
Действительно, есть немного других статей, но Бидельман является наиболее обширным. Он охватывает скрипты в импорте. Однако, поскольку я могу отображать импортированный контент и запускать сценарии, я не могу сохранить данные в локальном хранилище.
Я могу запускать сценарии из импортированного файла, в файле импорта, как предупреждение. Однако невозможно поймать данные, которые мне нужны, чтобы хранить и хранить их. Как этого достичь? Вот пример моего кода.
У меня есть простой выбор, чей идентификатор dim_city. Скрипт для захвата значения при изменении и сохранения в локальном хранилище очень прост:
var ie = importDoc.querySelector('#dim_city'); // capture the selector value.
function getData() {
var idc=ie.options[ie.selectedIndex].value;
var dataCi=(idc);
localStorage.setItem("ic", dataCi);
var storedData = localStorage.getItem(dataCi);
mainDoc.body.appendChild(dataCi.cloneNode(true)); // this adds tha captured data to importer file.
}
Как один файл, он работает нормально и хранит данные в localStorage. При импорте он запускает сценарии, такие как alert, но не может храниться в localStorage.
Очевидно, что браузер поддерживает импорт HTML.
2 ответа
Согласно определению, импорт не имеет контекста просмотра, поэтому нет localStorage
,
Я нашел решение, да, любой импортированный файл сохраняет данные в localStorage. Итак, я собираюсь ответить себе:
Проблема заключается в получении значений из опций свойств селектора. Это старый метод, и он кажется конфликтующим в Chrome при импорте. Поэтому решение состоит в том, чтобы вместо этого получить выбранное значение:
var idc=ie.options[ie.selectedIndex].value;
использовать этот:
var idc=docuemnt.getElementById('dim_city').value;
С другой стороны, позвольте мне пояснить, что это правда, что DOM любого импортированного файла не является частью DOM импортера, он может обращаться как к своему собственному DOM, так и к DOM мастера - импортера, ссылаясь и добавляя свой DOM к master.