Question

我在提交表单时会显示一个div，但是当我刷新页面时，我的数据会消失，我正在搜索在页面刷新时保留数据的方法。

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

＆＃13;

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

＆＃13;

<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()-->">

＆＃13;

Answer 1

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

由于localStorage只能存储字符串，因此您必须将对象转换为字符串。 JSON.stringify()发挥作用的地方。当您获取它时，您可以使用JSON.parse()将其转换回对象。

＆＃13;

$("#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.
}

＆＃13;

<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>

＆＃13;

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

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

修改当我自己犯了一个小错误时，我更新了我的片段。但正如我所怀疑的那样，SO不允许访问localStorage。

当然，您必须将此代码放入$(document.ready(function() { ... });才能使用。我忘了在我的HTML代码段中添加<form></form>。我刚刚在我的本地系统上进行了测试，并且工作正常。

Answer 2

您可以尝试使用localStorage。它是所有现代浏览器都具有的键值存储。如果您需要旧的浏览器支持（由javascript而不是服务器端脚本编写），则可以使用简写库写入localStorage并回退到cookies。

我将以localStorage：

为您举例说明

    //emulating that the form was showed (save clicked) and the value true stored on the localStorage
    localStorage.setItem('displayedForm', true);

    //initializing the state of the page
    initialize();

    function showHide() {
        var div = document.getElementById("hidden_form");
        if (div.style.display == 'none') {
            div.style.display = '';
            localStorage.setItem('displayedForm', true);//if the conditions are meet to display the form, store it on the localStorage
        } else {
            div.style.display = 'none';
            localStorage.setItem('displayedForm', false);//if the conditions are **NOT** meet to display the form, store it on the localStorage as well
        }
    }
    function initialize() {
        if (localStorage.getItem('displayedForm') === true || localStorage.getItem('displayedForm') === 'true') {
            var div = document.getElementById("hidden_form");
            div.style.display = '';
        }
    }

工作小提琴：https://jsfiddle.net/y0uep73e/

Answer 3

我自己面对这个问题，我写了一个简单的库来自动处理通过本地存储的表单数据的保存和加载：https://github.com/FThompson/FormPersistence.js

在卸载时保存数据并在加载时加载数据的示例：

<script src='https://cdn.jsdelivr.net/gh/FThompson/FormPersistence.js@1.0.1/form-persistence.min.js' type='text/javascript'></script>
<script type='text/javascript'>
    window.addEventListener('load', () => {
        let myForm = document.getElementById('my-form')
        FormPersistence.persist(myForm, true)
    })
</script>

在浏览器会话中保存表单数据

3 个答案: