How To Store Form Data In Session By Javascript

Tarun Thummar Apr 9, 2022 1 2.2K

In this article, we learn how to store form data in session by javascript.
Step 1: Create a Form.

<form id="js_form" method="post">
    <div>
        <label>Enter your first name.</label><br>    
        <input type="text" name="first_name" placeholder="Enter your first name." >
    </div>
    <div>
        <label>Enter your last name.</label><br>
        <input type="text" name="last_name" placeholder="Enter your last name." >
    </div>
    <div>
        <label>Enter your email.</label><br>
        <input type="email" name="email" placeholder="Enter your email." >
    </div>
    <div>
        <label>Enter your comment.</label><br>
        <textarea type="text" name="comment" placeholder="Enter your comment." ></textarea>
    </div>
    <div>
        <input Type="submit" value="submit">
    </div>
    <div id="results">

    </div>
</form>

Step 2: Create on submit function in our js file.

jQuery(document).ready(function(){
    jQuery("#js_form").on("submit",function(){ // use our form id.
        // Enter code here
    });
});

Step 3: Convert form data in serialize array using “serializeArray()” function.

jQuery(document).ready(function(){
    jQuery("#js_form").on("submit",function(){
        var form_datas = jQuery(this).serializeArray();
        
    });
});

Step 4: Strong form value from serializing array to JavaScript sessionStorage use “each” loop.

jQuery(document).ready(function(){
    jQuery("#js_form").on("submit",function(){
        var form_datas = jQuery(this).serializeArray();
        jQuery.each(form_datas, function(i, field){
            
        });
    });
});

Step 5: Now you can store value in the “sessionStorage” using “window.sessionStorage.setItem” script.

jQuery(document).ready(function(){
    jQuery("#js_form").on("submit",function(){
        var form_datas = jQuery(this).serializeArray();
        jQuery.each(form_datas, function(i, field){
            window.sessionStorage.setItem(field.name,field.value);
        });
    });
});

To check form value is stored or not use the below code to check.

var data = window.sessionStorage;
var html;    

jQuery.each(data, function (index, item) {
    html += "<li>" + index +"--"+ item + "</li>";
});
jQuery("#results").append(html);

Here is the Result.