从HTML导入文件保存在localStorage上

Saving on localStorage from an HTML Imports file

本文关键字：存在 localStorage 保存 文件 HTML 导入      更新时间：2023-09-26

我使用HTML导入，作为在网站上动态注入内容的工具。它很管用，很完美，有一篇好文章这公开了在文件和模板上使用导入。

事实上，其他文章很少，但比德尔曼的文章是最广泛的。它涵盖了导入中的脚本编写。但是，由于能够呈现导入的内容并能够运行脚本，我无法使其在本地存储中保存数据。

我可以在导入文件中运行导入文件中的脚本，就像警报一样。然而，我不可能捕捉到我需要存储的数据。如何实现这一点？这是我的代码示例。

我有一个简单的选择，它的id是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导入。

根据定义，导入没有浏览上下文，因此没有localStorage。

http://w3c.github.io/webcomponents/spec/imports/#terminology

我找到了解决方案，是的，任何导入的文件都在localStorage上保存数据。所以我要回答自己：

问题是从选择器的属性选项中获取值。这是一个旧方法，在Chrome中导入时似乎会发生冲突。因此，解决方案是获得选定的值：

var idc=ie.options[ie.selectedIndex].value;

使用这个：

var idc=docuemnt.getElementById('dim_city').value;

另一方面，让我澄清一下，任何导入文件的DOM都不是导入器DOM的一部分，它可以访问自己的DOM和主导入器的DOM，引用并将其DOM附加到主导入器。

相关文章：