使用HTML5本地存储创建论坛

Question

对于一个学校项目，我正在尝试创建一个具有HTML5本地存储的论坛。 人们可以在这里创建和提交简单的帖子，但是我不知道如何在单个页面上列出所有帖子。 这就是我所拥有的：

<form id="createpost" action="forum.html">
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="text" id="topic">
    <input type="submit" id="submit">
</form>

因此，所有创建的帖子都必须出现在“ forum.html”页面上。 我已经知道如何在本地存储中设置项目，但是我不知道如何在一页上显示彼此下面的所有帖子。

如果您能帮助我，我非常感谢！ 提前致谢！

Answer 1

对于参数的情况，假设您将所有帖子存储为对象，例如以下示例：

localStorage = [
  {
    name: "John Doe",
    age: "20",
    topic: "Being anonymous"
  },
  {
    name: "Jane Doe",
    age: "20",
    topic: "Finding John"
  },
];

（另外，假设您使用的是jquery，并且有一个“ posts”类的div）。 您可以使用一些Javascript原生函数来遍历每个对象，并将它们转换为列表：

localStorage.map(function(forumPost){
  $('.posts').append( "<ul>
                         <li>"forumPost.name"</li>
                         <li>"forumPost.age"</li>
                         <li>"forumPost.topic"</li>
                       </ul>")
});

Answer 2

好的，所以您知道如何存储项目：

localStorage.setItem(key, value);

您如何存储您的帖子？ 我将使用这样的对象数组：

var posts = [{
        topic: 'localstorage forum',
        user: 'John Doe' }, {
        topic: 'another topic',
        user: 'Eleina'
    }];

我将这样存储和获取数据：

//store
localStorage.setItem("posts", JSON.stringify(posts));

//get
var posts = JSON.parse( localStorage.getItem("posts") || "[]" );

由于它是一个数组，因此您可以遍历它并基于它创建HTML：

html = '';

for(var i=0; i<posts.length; i++) {
    html += '<div class="post">';
    html += '<b>' + posts[i].topic + '</b> by ' + posts[i].user;
    html += '</div>';
}

//output the html somehow, with jquery that could be
$("body").append(html);

希望这可以帮助 ：）