javascript - localStorage 不存储前置注释

Question

Here是 fiddle 。我试图通过将 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() 显然是为了获取 values of form elements 。在列表上尝试它会返回一个空字符串。您可以使用 $('#ul').html() 获取内部html，然后将其字符串化为 localStorage。

类似于:

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

要在稍后恢复这些(我在这里使用 jQuery，因为无论如何它都是可用的):

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

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

编辑:检查实际保存的内容很容易。在 Chrome 中，开发工具位于 Chrome 菜单中的工具下，或者右键单击网页中的任意位置并检查元素。

LocalStorage(以及一堆其他内容)列在Resources 选项卡中。您还可以转到 Console 选项卡并输入 localStorage 直接访问该对象。

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

此外，前面的评论者对使用 getItem()/setItem() 提出了很好的观点。您可以使用 localStorage.getItem('comments')，而不是使用 localStorage.comments。