Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 75

if (document.getElementById("storageTable")) {
document.getElementById("storageTable").replaceNode(tbl);
}
else {
storageDiv.appendChild(tbl);
}
}
Notice that this code added a call to the LoadFromStorage method to the top of
the window.onload event, so that localStorage is checked after the page loads. The
LoadFromStorage method takes any available elements in local storage and displays them in
an HTML table. This code takes advantage of the length property to determine whether any
local storage values need to be displayed. If not, the page displays a message about no data
in local storage. Add the following code to the button onclick events to start manipulating
localStorage :
document.getElementById("btnAdd").onclick = function () {
localStorage.setItem(document.getElementById("toStorageKey").value,
document.getElementById("toStorageValue").value);
LoadFromStorage();
}
document.getElementById("btnRemove").onclick = function () {
localStorage.removeItem(document.getElementById("toStorageKey").value);
LoadFromStorage();
}
document.getElementById("btnClear").onclick = function () {
localStorage.clear();
LoadFromStorage();
}
The preceding code implements each button's onclick event. A user can now add items
to local storage and see what's in storage. The user can continue adding to local storage in
this application until the storage is full. Availability of local storage is limited, and the storage
available isn't consistent across browsers. As of this writing, the documentation states that
Microsoft Internet Explorer 10 supports up to about 10 MB of storage. However, that could
change and may not be the same in other browsers; some now support only 5 MB of storage.
Keep this in mind when designing web applications that take advantage of the Web Storage
API.
Run the preceding example and add the following items to localStorage :
("Red","FF0000"), ("Green","00FF00"), ("Blue","0000FF").
Figure 1-51 shows the output on the screen after adding these items to the local storage.