如何在html上显示本地存储
我试图显示本地存储的输出
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```
紫衣仙女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而不是，因为它可能是安全威胁。innerHTMLouterHTML您在编辑中发布的错误告诉您output您尝试操作的变量为空。确保没有语法错误，并且在加载 HTML 后运行 JavaScript。
随时随地看视频慕课网APP
相关分类
JavaScript