操作本地存儲中的元素

Question

我試圖將li元素添加到Local Storage，然后恢復它以將其附加到ul列表。

假設li元素是：

    <li>
      <label>Colors</label>
      <select>
        <option>Yellow</option>
        <option>Blue</option>
        <option>Orange</option>
      </select>
      <label>Comments</label>
      <textarea></textarea>
    </li>

...它來自一系列代碼，例如：

   const li = document.createElement('li');
   const label = document.createElement('label');
   li.appendChild(label);

...依此類推，直到創建了完整的li元素。

我使用以下命令將li元素添加到本地存儲中：

    localStorage.setItem('listsOfColors', JSON.stringify(li));

我用以下方法恢復它：

    let colors = JSON.parse(localStorage.getItem('listsOfColors'));

但是，當我嘗試將其追加到ul列表中時：

    ul.appendChild(colors);

...它說參數1不是節點。

我已經嘗試過許多方法來解決此問題，但最終沒有成功。 我在網上瀏覽了很多選擇，但沒有找到任何可以幫助的選擇。

一手在這里將不勝感激。

謝謝！

Answer 1

因為你需要寫

ul.innerHTML = 'your stringified <li>';
ul.innerHTML += ''; // In case you want to append

appendChild采用HTMLElement作為參數。 由於您只是創建了JSON元素，因此將無法使用。 您應該只將其存儲為字符串，然后將其附加為字符串。

（我不會繼續討論安全問題，我想您已經知道了）

Answer 2

Node對象不能用JSON表示； JSON只能包含字符串，數字，純對象，數組和null。 您可以存儲Node的innerHTML ，以便在一定程度上重新創建它（當然，它會丟失所有事件監聽器和自定義屬性）。

更好的方法是僅存儲重新創建UI所需的數據。 在這種情況下，我只存儲顏色名稱數組，因為它允許您隨時創建<li>元素。

Answer 3

你不可以做這個 ：

  localStorage.setItem('listsOfColors', JSON.stringify(li));

您必須獲取帶有他的id的元素，例如：

element = document.getElementById(id);

然后您可以存儲您的元素

  localStorage.setItem('listsOfColors', element);

Answer 4

LocalStorage中的數據存儲為字符串類型的鍵值對。

JSON.parse返回一個JSON對象，函數appendChild以DOM節點作為參數。

JSON！=節點

您可以查看一些庫，例如：

domJSON