ASP DotNet Core 6 MVC 保存/自动保存部分完成的表格

Question

我一直在寻找如何保存和自动保存部分完成的表格的答案。我的用户需要能够保存表单以在以后完成。我的问题是模型和数据库表要求数据的特定部分在保存到数据库之前是完整的。

我没有插入代码，因为它是当前工作的所有标准 CRUD。用户必须先完成表格（有些表格由于大小而被分成更小的部分）才能提交。

我只是在寻找关于这个主题的文章和/或教程。我认为答案是在 ajax 中，不幸的是，我没有太多经验。如果有人能指出我正确的方向，我将不胜感激。

我只需要用户能够拉出与特定用户、参与者、参与者活动和表单关联的表单。一个用户可以与多个参与者一起工作，他们可以有多个活动。这是一个复杂的应用程序，但需要能够保存和自动保存（以防用户不得不暂时离开他们的计算机）。

有什么建议吗？需要更多信息吗？预先感谢任何方向。

Answer 1

可以使用浏览器的LocalStorage。它可以保存5MB的数据，通常用于保存不完整的表格。与 cookie 不同，它不会在每次请求时都发送到服务器。
你可以试试下面的代码

<form id="myform">
    <p>
      <label for="name">Name</label>
      <input type="text" id="name">
    </p>
    <p>
      <input type="radio" name="sex" id="male" value="Male">Male
      <input type="radio" name="sex" id="female" value="Female">Female
    </p>
    <p>
      <label for="phone">Contact Number</label>
      <input type="number" id="phone">
    </p>
 
    <select name="country" id="country">
      <option value="USA">USA</option>
      <option value="UK">UK</option>
      <option value="Japan">Japan</option>
      <option value="France">France</option>
    </select>
    <p>
        <input type="submit" id="formSave">
    </p>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script>

    document.getElementById("myform").addEventListener("change", myFunction);

    function myFunction() {
        localStorage.setItem("name", $("#name").val());
        localStorage.setItem("phone", $("#phone").val());
        localStorage.setItem("country", $("#country").val());
        //save selected radio
        var k_val = $(":radio[name=sex]:checked").val();
        localStorage.setItem("k_val", k_val);

    }

    //Get Value from LocalStorage
    
    function myStorage() {
    
    var name = localStorage.getItem("name");
    var phone = localStorage.getItem("phone");
    var province = localStorage.getItem("country");
    //put storage value to input
    $("#name").val(name);
    $("#phone").val(phone);
    $("#province").val(country);
    //radio
    $(":radio").removeAttr("checked");//important
    var kk_val = localStorage.getItem("k_val");; 
    $(':radio').each(function () {
        if ($(this).val() == kk_val) {
        $(this).prop("checked", true);
        }
    })
    }
    
    myStorage();
  </script>

每次输入变化时，eventlisener都会更新LocalStorage，当你刷新时，数据会被读取和加载。