Question

我有一个简单的表格和div

<form action="" method="post">
  <input name="username">
  <textarea name="msg" rows="10"></textarea>
  <input type="submit" name="ok" value="Send" >
</form>
<div id="comments"></div>

如何使用localstorage创建get和post数据从表单到div？

在用户通过检查localstorage刷新页面后，数据也必须保留在那里。

这类似于客户端本地发布的评论。

Answer 1

首先，您需要从表单中获取数据。我建议您修改输入以获得唯一的ID或类以便于访问：

<form action="" method="post">
  <input id="username" name="username">
  <textarea id="msg" name="msg" rows="10"></textarea>
  <input type="submit" name="ok" value="Send" >
</form>
<div id="comments"></div>

我假设你正在使用jQuery，因为它在你的标签中，所以你可以用这样的jQuery获取数据：

var username = $('#username').val();
var message = $('#msg').val();

然后您需要将其保存到本地存储中。既然你说它会像评论一样，我假设它们会有很多，所以你需要使用一个数组：

localStorage.comments = localStorage.comments || [];
localStorage.comments.push({
  username: username,
  message: message
});

那就是它！然后，您可以使用localStorage.comments从任意位置访问它。本地存储存在于全局window对象上，因此您无需执行任何特殊操作即可访问它，您只需阅读它并从任何地方写入。

您可以查看有关如何使用localStorage here和here的更多示例。

Answer 2

然后您需要的是会话存储，

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

此博客可以帮助您

http://www.thomashardy.me.uk/using-html5-localstorage-on-a-form

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

使用localstorage从表单发布和获取数据

2 个答案: