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之外的数据，则可以在JSON处存储sessionStorage字符串，其中一个值为.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进行序列化和重新水化处理，因此您不会丢失附加到该元素的任何事件侦听器，此外，它们不会占用大量的存储空间，以防您打算对许多元素执行此操作。

将DOM元素保存在SessionStorage中

3 个答案: