CODEWITHSUNDEEP
javascriptjquerylocal-storage
donguy76
donguy76

Reputation: 640

Storing data from elements before a refresh

I have a web page with 3 elements where a user will enter a text value and then press a button. On submit, it will process and return some values to be populated in a table.

This part works fine.

Now if the user refreshes the page, all the data is gone and the 3 elements and the table looks empty.

I would like to do this. Catch the refresh event and store the 3 user entered values in a local storage and when the page is loading back up, I will send this back to the controller to populate the tables again.

Is this possible to do? I am pretty new to web development and am running out of ideas.

This is what I tried. And this doesn't work.

window.onbeforeunload = function() {
                localStorage.setItem(name, $('#name_field').val());
                localStorage.setItem(id, $('#id_field').val());
                localStorage.setItem(pw, $('#pw_field').val());
                alert("am here")
            }

            window.onload = function() {
                var name= localStorage.getItem(name);
                if (name != null) $('#name_field').val(name);
                var id= localStorage.getItem(id);
                if (id!= null) $('#id_field').val(id);
                var pw= localStorage.getItem(pw);
                if (pw!= null) $('#pw_field').val(pw);          
            }

I could never get the alert in window.onbeforeunload function to pop up.

Upvotes: 0

Views: 1279

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

You can store it everytime on the local storage(or event session storage, which I think its better in your case). Then everytime you look after that value on the storage. In case of any value found, you send it to the controller.

If it was me I would do as I said above, save your data into the sessionStorage(what means that the data will be lost if user closes the tab/browser):

var saveData = function()
{
    var data = 
    {
        id: $("#id_field").val(),
        name: $("#name_field").val(),
        pw: $("#pw_field").val()
    };

   sessionStorage.setItem("formValues", JSON.stringify(data));
}

Idk if your post is async or not. If its async, you can call that function on your successCallback, if it isn't async, call it on the submit event.

Then at ready event, you can read that data:

$(document).ready(function()
{
    var data = sessionStorage.getItem("formValues");

    // Check if there is any user data already saved
    if (data)
    {
        data = JSON.parse(sessionStorage.getItem("formValues"));

        $("#id_field").val(data.id);
        $("#name_field").val(data.name);
        $("#pw_field").val(data.pw);
    }
});

I prefer to store a group of data in an object into a single key on the storage, that is why I use JSON to stringify and parse an object, because storage only accepts string types.

A simple advise: Don't - ever - store passwords, let the user type it. For security reasons.

Upvotes: 2

Related Questions