如何在html上顯示本地存儲

Question

我試圖顯示本地存儲的輸出

function addSampleNotes() {

    localStorage. setItem( '2020-09-28 13:35:00', 'Call Tony about blog code');
    localStorage. setItem( '2020-10-02 07:00:00', 'Buy eggs');
    localStorage. setItem( '2020-10-14 16:21:00', 'Hang out the washing');
}

addSampleNotes();

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

這設法完美地出現在控制台中，但是我希望它顯示在我的 html 頁面上

var output = document.getElementById("output");

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  output.innerHTML = ( localStorage.getItem( localStorage.key( i ) ) );
}

嘗試添加這樣的東西，但我得到空錯誤。 如何在 html 上顯示我的本地存儲？

HTML

<body>
    
    <fieldset>
       <legend>My Tunings</legend>
       <div id="output"></div>
    </fieldset>
<script type="text/javascript" src="js.js">
    </script>
    
  </body>

錯誤是

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at js.js:14```

Answer 1

我建議您將每個項目放入其自己的元素中。 例如段落，或者在你的情況下無序列表ul會是最好的。

像這樣：

for (var i = 0, len = localStorage.length; i < len; ++i) {
    var element = document.createElement("p")
    element.textContent = localStorage.getItem(localStorage.key(i))
    output.appendChild(element)
}

如果您不設置 HTML，則首選textContent而不是innerHTML或outerHTML ，因為它可能存在安全威脅。

您在編輯中發布的錯誤告訴您，您嘗試操作的output變量為空。 確保您沒有語法錯誤，並且在加載 HTML 后運行 JavaScript。

如何在html上顯示本地存儲

問題描述

1 個解決方案

解決方案1
1 已采納 2020-10-20 13:09:39

如何在html上顯示本地存儲

問題描述

1 個解決方案

解決方案1 1 已采納 2020-10-20 13:09:39

解決方案1
1 已采納 2020-10-20 13:09:39