I'm trying to make an iBook widget which has text fields and to store what those fields have in them to the local storage on the iPad. I have no HTML/JS/CSS knowledge at the moment (but am working on it). I want to be able to save the data automatically when closing the widget. If the book ever gets deleted, I want that data to be deleted as well. Is there an easy way round this? Thanks
iPad 2
Localstorage uses simple key-value pairs.
To restore a value with javascript, use getItem with the name of your key:
localStorage.getItem(key);
To set a value with javascript, use setItem with the name of your key, and the value you want stored:
localStorage.setItem(key,val)
To use this with iAd Producer, you might want to set values on a text field using "Did Value Change" and executing a javascript that uses localStorage.setItem. To restore your values, you could load the values into a page's fields on the "View Will Appear" event.
Currently the key-values are not deleted whent the book is deleted from the shelf. To clear the values, you can use javascript.
For a specific key: localStorage.removeItem(key);
To clear all the keys: localStorage.clear();
Hi George,
Thanks for your response. I wondered though if I could be bold enough to ask you for something a little more practical as I have no languaging experience. Let us say that I have a text field and I want the widget to store the information once someone exits the widget automatically. The text field is called textField in JS. I want it to restore the value of what anyone puts in the text field should they open the widget / page again. My questions are:
1. What is my 'key'?
2. Exactly what code would I need to write in the code editor and where would I need to write it? The Global.js?
3. iAd Producer has a scratchpad template which stores the information your draw on it? How does it do this?
4. What does "foo" and "bar" mean?
I'm sorry to ask so many questions... I'm just a lowly teacher trying to get my head round all of this. I really appreciate your help so far!
Thanks again
The key is a string. You can use a literal string, or can use a string stored in a variable.
In iAd Producer, you can open the page with your text fields. Click the background for the page, then open the Inspector panel. At the bottom of the Inspector panel there is an "INTERACTION" section. Click on the "+" icon to create a new "View will Appear" event. Then select "Execute Javascript" for that event. Then click the ">" button to open the javascript code editor. If the outlet to your text field is named "textField" you could use javascript like this:
this.onViewControllerViewWillAppear = function (event) {
var theValue = this.outlets.textField;
if (localStorage.getItem("theKey") === null) {
theValue.value = "Please enter some data";
} else {
theValue.value = localStorage.getItem("theKey");
}
};
The above will restore the value in localstorage into the text field (or set it to "Please enter some data" if no value has been stored).
To set the value, click on your text field on the page. At the bottom of the Inspector panel there is an "INTERACTION" section. Click on the "+" icon to create a new "Did Change Value" event. Then select "Execute Javascript" for that event. Then click the ">" button to open the javascript code editor. This javascript will store the value in localstorage using a key named "theKey":
this.onControlValueChange = function (event) {
var theValue = this.viewController.outlets.textField;
localStorage.setItem("theKey", theValue.value);
};
The above will store any changes in localstorage using a key named "theKey".
Thanks George. OK a few more questions. Let's say that I now have more than one text field (e.g. textField1 and textField2) and they're on the same page. This time I want to do the same with the next question. Would I have to reapeat the code again underneath (substituting textField with textField) or could I just add a comma after textField and add textField2?
Also does }; mean the end of the command and do I add this each time I write a piece of code like you have above. So altogether would it look like this?:
this.onViewControllerViewWillAppear = function (event) {
var theValue = this.outlets.textField;
if (localStorage.getItem("theKey") === null) {
theValue.value = "Please enter some data";
} else {
theValue.value = localStorage.getItem("theKey");
}
};
this.onControlValueChange = function (event) {
var theValue = this.viewController.outlets.textField;
localStorage.setItem("theKey", theValue.value);
};
Also, how would I go about adding a cancel button to clear all the data? If the data is not deleted and the book is deleted on the shelf, does it remain there indefinitely? How would someone get rid of it off their iPad?
George, do you not need to make sure that you namespace the data differently in your localStorage for each widget so that there are not any conflicts? If I decide to make another widget later on will this be identified by it's bundleID?
Thanks again!
A great (and free) starting point for learning JavaScript is "Eloquent JavaScript":
What I provided was a simplified example to illustrate the basics. You will need to store/retrieve every key value pair separately from localstorage. One way to do that would be to duplicate what I provided, but it would be more efficient to write a reusable function (beyond the scope of this discussion thread).
The basic code to clear a value for a key in localstorage is:
localStorage.removeItem(key);
Where "key" is a variable containing the string for your key. You could replace this with a literal string as I did in the previous example.
Coming up with a namespace scheme is a good idea too.
Thanks... Over to Lynda.com!
Hi pazzle,
I'm curious to know if/how you were able to solve your problem of storing data entered in multiple text fields.
I'm facing the same problem and am currently stuck...
Are you still stuck? If so, where are you stuck?
localStorage
