[belmont]

Hi,

I am wanting to use a form for users to fill, save, and when they reopen/revisit the the page, the saved the data will automatically appear, without needing to press a re-load/update button. I am learning little bits of js as I go.

I have used the following example HTML5 Local Storage Demo

[url]http://www.genuitec.com/support-genuitec/viewtopic.php?t=2251[/url]

and numerous other suggestions found here, as well as on line.

I have spent hours/days using different examples, modified, changed this and that, but have had no luck whatsoever.

Is there some simple code to add to the above example to make this happen? All I really need is a handfull of textboxes for the user to fill in and save.

My head can no longer take it. Every time I try out a new version, my heart starts racing, hoping, maybe this time, it will work. But alas, no. LOL

Thank you all in advance

[Mike Felker]

I would use a mysql database with php, read the data on login and utilize the $SESSION command to keep all of it up to date on the session, then when finished, write back to the database when the user logs out.

Mike

[belmont]

totally lost me there 🙁

I want it to also work without an internet connection

[Code_A]

You should be able to accomplish this through local storage. To get the data to repopulate on load automatically, try placing the the localStorage.getItem call in the doucmentReadyHandler function in your <project_name>_custom.js file.

phoneui.documentReadyHandler = function() {

    //retrieve stored settings
    $('#m1-screen1-txtUsername').val(localStorage.getItem("username"));
}

[belmont]

Thanks CodeA
I tried, but still no joy 🙁
however if I exit, then go back in, it is still blank, until I hit the back button on my phone, and then it populates the fields.
the code is

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {

//retrieve stored settings
$('#m1-locstorage-datafield').val(localStorage.getItem("datafield"));
$('#m1-locstorage-keyfield').val(localStorage.getItem("keyfield"));
}
  
function update() {
  //alert('update');
  if (!window.localStorage) {
    warnNoLocStorage();
    return;
  }
  
  var key = $('#m1-locstorage-keyfield').val();
  var data = localStorage.getItem(key);

  $('#m1-locstorage-datafield').val(data);  
}
  
function save() {
  //alert('save');
  if (!window.localStorage) {
    warnNoLocStorage();
    return;
  }
  
  var key = $('#m1-locstorage-keyfield').val();
  var data = $('#m1-locstorage-datafield').val();

  localStorage.setItem(key,data);
  alert('Save completed');
}

function warnNoLocStorage() {
    alert('Local Storage not available');
}
/**
 * Notification that the page's HTML/CSS/JS is about to be loaded.
 * Perform custom logic here, f.e. you can cancel request to the server.
 * @param {String} targetScreenId 
 * @returns {boolean} true to continue loading; false to halt loading
 */
phoneui.prePageLoad = function(targetScreenId) {
  // add custom pre-load code here
  // return false to terminate page loading, this cancels transition to page as well
  return true;
}

[Code_A]

Try saving the data like this in your save function:

localStorage.setItem ('datafield',data);
localStorage.setItem ('keyfield',key);

[belmont]

Thank you, I will give it a go now. I don’t need the update function, so I will ake that out too.

So what i’m left with is one text area ID=keyfield (OnChange=None), another text area ID=datafield (OnChange=None) and one save button ID=push1 (OnClick run javascript save() ).

should I take the follwoing out of the save function also

  var key = $('#m1-locstorage-keyfield').val();
  var data = $('#m1-locstorage-datafield').val();

so that I am left with only the following in the phoneui.documentReadyHandler?

/**
 * Called when document is loaded.
 */
phoneui.documentReadyHandler = function() {

//retrieve stored settings
$('#m1-locstorage-datafield').val(localStorage.getItem("datafield"));
$('#m1-locstorage-keyfield').val(localStorage.getItem("keyfield"));
}
 
function save() {
  //alert('save');
  if (!window.localStorage) {
    warnNoLocStorage();
    return;
  }
 
  localStorage.setItem('keyfield',data);
  localStorage.setItem('datafield',data);
  alert('Save completed');
}

function warnNoLocStorage() {
    alert('Local Storage not available');
}
/**
 * Notification that the page's HTML/CSS/JS is about to be loaded.
 * Perform custom logic here, f.e. you can cancel request to the server.
 * @param {String} targetScreenId
 * @returns {boolean} true to continue loading; false to halt loading
 */
phoneui.prePageLoad = function(targetScreenId) {
  // add custom pre-load code here
  // return false to terminate page loading, this cancels transition to page as well
  return true;
}

[belmont]

ok, using the above code, the results are as follows.

Open app, enter data, exit via phone home button. Open app = data there as per last input.

However, if app is opened and data is entered, and i then use the phone back button to exit that screen (I only have the one at moment for testing purposed), then open the app again, the data is no longer there.

🙁

[Brandon]

Instead of a save button when I want to save the text from a field into localStorage I use the text fields onChange event. This way anytime any text is placed it is ‘automatically’ saved, so it the person closes the app, or it crashes, the data is still saved.

[Code_A]

It sounds like your data is still not properly being saved to local storage.

This should be all you need to do (untested – written on the fly):

  

phoneui.documentReadyHandler  = function() {

//load stored data on startup
var key = localStorage.getItem("keyfield");
var data = localStorage.getItem("datafield");

$('#m1-locstorage-keyfield').val(key);
$('#m1-locstorage-datafield').val(data);

}

function save(){ //call this function from your save button
var key = $('#m1-locstorage-keyfield').val();
var data = $('#m1-locstorage-datafield').val();

localStorage.setItem("datafield", data);
localStorage.setItem("keyfield", key);

}

[belmont]

thanks guys, going to give both a try now.

Coda A, do I need to give the text fields (ie datafield & keyfield) an onChange action via the screen, like Cincy Planets way?

[belmont]

CincyPlanet,
I think your way appears to be working, onChange I have

localStorage.setItem('datafield',$('#m1-locstorage-datafield').val());

in the custom.js I have

phoneui.documentReadyHandler = function() {

//retrieve stored settings
$('#m1-locstorage-datafield').val(localStorage.getItem("datafield"));
$('#m1-locstorage-keyfield').val(localStorage.getItem("keyfield"));
}

so far so good.

I will play with this a little further, as I would like some kind of button for the user to press and get a message that it is saved. Even if it does nothing more than than onClick show pop-up alert

[belmont]

Code A, thank you, but I am still not having luck, as such.

If I enter the data, save, exit and return to app, data is lost, until I hit the back button on my phone.

I appreciate your help on this too.

I will play with CincyPlanets way for now, and see how far I can get that to go for what I want to achieve, and then I’ll come back to your code, and play with that too 🙂

[Code_A]

Whether you save it from a button click or from the text box onChange event doesn’t matter, the code is the same. It’s just personal preference how you want to save the data in the GUI. You can save using both ways in your app if you want.

The code below can be placed in either onChange event of the text box or the onClick event of the button and the result should be the same.

localStorage.setItem('datafield',$('#m1-locstorage-datafield').val());

Or, you could place the above code in the save function() in you js file and call the function from either (or both) events (onClick or onChange) and the results should be the same:

save(); //code behind the button or textbox

[Brandon]

Code A is correct, the code is the same, and it never hurts to even use both if the data is important. So it auto saves as they type in (great in case an app crash or the user closes the app on accident) and a save button. The good thing about both is if you need to in the save button you can add extra code, like save and then go to a new page, or show an alert that the info has been saved.

[Author]

Posts