使用本地存儲從表單發布和獲取數據

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從表單到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 的更多示例。

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');