HTML and CSS Reference
In-Depth Information
You can find the complete listing in ch06/offline-example/local-
storage-2.html. Look for the
init()
function for the previous code.
There are some other functions you'll need
for a complete application. A to-do list
isn't much use if it's impossible to remove a
task after completion. To delete a single
item from
localStorage
, pass its key to the
removeItem()
method:
window.localStorage.removeItem(key);
This depends on knowing which element on the page is associated with
which key in local storage. If a
data-*
attribute is used to store that
information, then removal is straightforward. That attribute can be cre-
ated in the
add_listitem()
function if it's modified to accept both the
key and the item as parameters:
function add_listitem(key, item) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(item));
li.setAttribute("data-key", key);
var but = document.createElement('button');
but.appendChild(document.createTextNode('Delete'));
but.onclick = remove_item;
li.appendChild(but);
document.getElementById('todo_list').appendChild(li);
}
In a fully HTML5
—
compliant browser, the line
li.setAttribute("data-key", key)
would become
li.dataset.key = key
. Because no browser has so far
implemented the custom data attribute API, this
example sticks with the traditional DOM API.
Another change is required to support this. Previously it didn't matter
what the key was when adding a new item, but now it needs to be
