將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進行序列化和重新水化，因此您不會丟失附加到該元素的任何事件偵聽器，而且它們不會占用大量存儲空間，以防您打算對許多元素執行此操作。