localStorage不存储前置注释

Question

这是小提琴。 我试图通过将ul保存为var在ul存储前置注释，并在其上使用localStorage将其保存到浏览器中。

HTML：

<h1>Commentia!!!</h1>
<textarea id='type'></textarea>
<br />
<input type='text' id='input'>
<br />
<br />
<button id='b' onclick='comment()'>Submit</button>
<div id='box'>Type your comment
<br />(please use spaces)</div>
<div id='button'>Click to submit</div>
<div id='inp'>Type your name</div>
<div id='dialog'></div>
<h3>Comments</h3>
<ul id='ul'></ul>

JS：

var l = $('#ul').val();
localStorage.comments = l;
document.getElementById('ul').innerHTML = localStorage.comments;

Answer 1

val()显然旨在获取form元素的值 。 在列表上尝试返回一个空字符串。 您可以使用$('#ul').html()获得localStorage ，然后将其字符串localStorage 。

就像是：

var l = $('#ul').html();
localStorage.comments = JSON.stringify(l);

要在以后恢复它们（我在这里使用jQuery，因为仍然可以使用）：

$('#ul').html(JSON.parse(localStorage.comments));

（未经测试）。 采取这种方法有什么特殊原因吗？

编辑：它很容易检查实际保存的内容。 在Chrome中，devtools位于“ Tools下的“ Chrome”菜单中，或者右键单击网页和“ Inspect element任意位置。

“ Resources选项卡中列出了LocalStorage（以及其他一些东西）。 您也可以转到“ Console选项卡，然后键入localStorage以直接访问该对象。

请记住，localStorage仅存储字符串，每个“源”限制为5MB，我指的是主机。 如果您在localhost上进行了大量测试，我想您有机会在某个时候达到配额。

另外，以前的评论者对使用getItem() / setItem()有一个很好的了解。 而不是使用localStorage.comments而是使用localStorage.getItem('comments') 。