将DOM元素保存在SessionStorage中

Question

这个想法很简单，但我无法弄清楚。 基本上，我想保存一个在sessionStorage中单击的元素。 但是，这并不容易，因为sessionStorage只接受字符串。

我正在为所有导航按钮添加一个click事件。 （这当然不起作用）

navButtons.addEventListener("click", function () {
    sessionStorage['active-nav'] = $(this);
});

如何保存DOM元素并在以后访问？

编辑

基本上，当重新加载页面时，我想跟踪之前单击过哪个元素，并在加载新页面后对其应用一些CSS。 例如，将该元素的背景颜色更改为橙​​色等。因此，一旦重新加载页面，我需要以某种方式在sessionStorage中保存有关该元素的一些信息并访问该元素/查找该元素。 我使用了向所有元素添加ID的方法，然后使用javascript函数document.getElementById("test")进行查找。 但是，导航元素很多，因此将ID添加到所有导航元素可能不是最干净的解决方案。 解决此问题的最佳方法是什么？

Answer 1

您可以将sessionStorage值设置为元素的.outerHTML 。

sessionStorage['active-nav'] = this.outerHTML;

如果仅需要HTML以外的数据，则可以在sessionStorage存储JSON字符串，其中一个值是.outerHTML 。

Answer 2

navButtons.addEventListener("click", function () {
   sessionStorage.setItem('div', this.outerHTML);
});

使用元素的outerHTML属性进行保存

获得相同的元素

var element=sessionStorage.getItem('div');

Answer 3

我想你应该要么：

• 存储它的id ，然后使用document.querySelector()通过存储的ID重新选择它。

• 通过使用诸如SimmerJS之类的库来生成并存储反向选择器 ，然后使用document.querySelector()使用存储的选择器重新选择它。

反向选择器避免了向所有相关元素添加显式ID的需要。

反向选择器的工作方式如下：

 window.simmer = window.Simmer.configure({ depth: 10 }) document .querySelector('.container') .addEventListener('click', e => { console.log(simmer(e.target)) }) 

 <script src="https://cdn.jsdelivr.net/npm/simmerjs@0.5.6/dist/simmer.js"></script> <div class="container"> <div class="left"> <button> Click Me </button> </div> <div class="right"> <button> Click Me </button> </div> </div> 

然后保存产生的选择器，并再次使用它在页面加载时重新选择元素。 无需明确的ID。

保存选择器可以避免对HTML进行序列化和重新水化，因此您不会丢失附加到该元素的任何事件侦听器，而且它们不会占用大量存储空间，以防您打算对许多元素执行此操作。