HTML and CSS Reference
In-Depth Information
value has to be a string, and in this case the value is whatever the user
has typed into the text input. The full code for this first example is in
ch06/offline-example/local-storage-1.html.
Now that your to-do items are in local
storage, they'll be there the next time you
load the page. Restart your browser and
load the page again to check. You should
see something like the screenshot here.
You've not been lied to, your items are in
local storage, but that doesn't mean they'll
appear in your page automatically. You
have to write application logic to grab the
contents of
localStorage
and display it, just
as you had to write code to add the to-do
items to the page in the first place.
to restore the application STate, you need to run a function when the
page loads that populates the list with the items in
localStorage
.
You have a function to add an item to the list, so you just need a
function to extract the items from
localStorage
.
How many items
are stored?
Loop through all the
stored items.
var todo_index = window.localStorage.length;
for (var i = 0; i < todo_index; i++) {
add_listitem(
Get the key for the
item at the current
index.
window.localStorage.getItem(
window.localStorage.key(i)
Use the key to Get the
current item. and then pass
that to the
add
function.
)
);
}
