提交之前存储表单数据的最佳方法？

Question

First let me describe the scenario. Suppose a user filling a form in my site. The form may contain around 14 fields. Now after completing the 7fields he/she go back by mistake or close the window or the pc take a restart.

Now when he/she came back is there a way to show him that 7 fields filled up? Now there is three case to handle:

Go back from the main page Close the window Take a pc reboot.

There might be no solution for all of this. If only 1 and 2 situation can be handled that is fine.

I know about session but so far i know to save something in session you need to submit the site or refresh which is not my considerable case.

So i need a good way to do that?

In actual my site will host around 20-40 fields in each forms. So it is very important to make a recovery for the user if he close the tab or go back.

Answer 1

You can also set the session VIA ajax every x seconds. That way you eliminate your problem about refreshing the page to save your session value.

setInterval(function(){
     $.post("/ajaxLogin.php",{
            value: $("#value").val()
        }, 
        function(result){
            console.log('saved!');
      });
}, 2000);

And this is the ajaxLogin.php that is called via ajax

<?php
    session_start();
    $_SESSION['value'] = $_POST["value"];
?>

Answer 2

In the web world, the usual thing to do is to either save data in Cookies or Sessions. Cookies are stored in the user's machine until its expiration date is met, while Sessions usually have a shorter time span (depends usually on the server's session time to live).

One approach, if the user can leave and come back at a later point, (even after a restart), is to save it to a cookie. You can use setcookie in PHP for this, and serialize the data.

Example:

setcookie("UserFormData", serialize($_POST), time()+3600);  /* expire in 1 hour */

From: http://php.net/manual/en/function.setcookie.php

Answer 3

您可以使用Ajax将数据保存到会话中...您无需刷新..您可以在每次字段更新时或需要时进行ajax调用。.ajax调用不需要等待表单提交。在每个按键/击键上触发（尽管不推荐）

Answer 4

You could create an onchange function that creates/updates a cookie . You can set up a specific cookie for each input, assuming you're using PHP and the function in the link I provided you could do:

<input type="text" name="username" onchange="SetCookie('username',this.value,1);" value="<?=$_COOKIE['username'];?>" />

This seems like it would be very tedious, there may be a much better solution...