javascript - 在浏览器 session 中保存表单数据

Question

我有一个在提交表单时显示的 div，但是当我刷新页面时，我的数据消失了，我正在寻找一种方法来在页面刷新时保留我的数据。

我知道如何在 session 中保存数据，但不知道如何保存整个表单。我该如何处理这个问题？甚至可以使用 Javascript 保存整个表单吗？

function showHide() {
  var div = document.getElementById("hidden_form");
  if (div.style.display == 'none') {
    div.style.display = '';
  } else {
    div.style.display = 'none';
  }
}

<form name="product_form" id="product_form" enctype="multipart/form-data" action="admin_products.php" method="post" accept-charset="utf-8" onsubmit="showHide();
                        return false;">
  <input type="textfield" id="title" name="title" value="" readonly>
  <div id='hidden_form' style="display:none">

    <input type="text" id="name" name="name" value="" placeholder="Product Name">

    <label id="option_1" name="option_1">Option Name</label>
    <input type="text" id="optionn" name="optionn" value="" placeholder="Product Name">

  </div>

  <input type="submit" id="add" name="add" value="Save" class="" <!--onclick="myFunction()-->">

Answer 1

当您点击 submit 时，您将重新加载页面并丢失数据。通过使用 localStorage和 JSON.stringify()您可以在浏览器中本地保存数据，并在加载页面时获取数据。

自 localStorage只能存储字符串，您必须将对象转换为字符串。那就是JSON.stringify()发挥作用。当你获取它时，你可以使用 JSON.parse()将其转换回对象。

$("#btnSubmit").click(function() {
  var data = {};
  data.Text = $("#myText").val();
  data.isProcessed = false;

  localStorage.setItem("myData", JSON.stringify(data));
});


//On load
var data = localStorage.getItem("myData");
var dataObject;

if (data != null) //There's stored data
{
  dataObject = JSON.parse(data);
  $("#myText").val(dataObject.Text)

  localStorage.removeItem("myData"); //Remove data, otherwise it'll be there for a long time.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <form method="post">
    <input type="text" id="myText" />
    <button type="submit" id="btnSubmit">Submit</button>
  </form>
</div>

关于 localStorage 的更多信息:W3Schools
有关 JSON.stringify 和 JSON.parse 的更多信息:MDN

我不知道该代码段是否有效，因为它会提交帖子。复制此代码段并在您的本地系统上尝试。

编辑 由于我自己犯了一个小错误，我更新了我的代码片段。但正如我所怀疑的那样，SO 不允许访问 localStorage。

当然，您必须将此代码放入您的 $(document.ready(function() { ... }); 中让它工作。我确实忘记添加 <form></form>到我的 HTML 片段。我刚刚在我的本地系统上对其进行了测试，它运行良好。