BetRob
BetRob

Reputation: 251

how to retain the state of a jquery mobile page without using data-dom-cache

Is there a way to retain the values of form elements on a page without using data-dom-cache on the page.

eg. I have a form, the user enters secure data into the form(Page1) and navigates to another page(Page2 - where the form continues) and onclick of 'Submit' button a request is sent to the server.

  1. If the request fails and the user navigates back to page 1, the user entered values are retained on the page.

  2. If the request is successful and the user navigates back to page 1, the user entered values are NOT retained on the page.

Is there a way to this without using 'data-dom-cache' attribute on the page.

Upvotes: 0

Views: 127

Answers (1)

Motoo
Motoo

Reputation: 90

You could use HTML sessionStorage

EDIT:

When you leave page1 you can save page data in sessionStorage e.g.

var keyForStep1 ='step1'   
var objectValue = JSON.stringify({name:"John",lastname:"Doe", other:"other staff"});//NOTE: your form data  
if (typeof (sessionStorage) !== "undefined") {
                if (keyForStep1!== null) {
                    if (sessionStorage.keyForStep1) {
                        try {
                            //sessionStorage.key = objectValue;
                            sessionStorage.setItem(keyForStep1, objectValue);
                        } catch (e) {
                            console.log("LIMIT REACHED: (" + i + ")");
                            console.log(e);
                        }
                    }
                }
            }

And if the request fails you can read data from storage like this(you can check if keyForStep1 exist and if it does then read data from it).

var objData = JSON.parse(sessionStorage.keyForStep1);
console.log(objData.name)//etc..

http://www.w3schools.com/html/html5_webstorage.asp

You can see browser support for sessionStorage here:

http://caniuse.com/#feat=namevalue-storage

Upvotes: 1

Related Questions