HTML and CSS Reference
In-Depth Information
Another word of warning: It's conceivable that you might be
storing some value under the name of “key,” so you might write
some code like the following:
sessionStorage.setItem('key',
¬
'27152949302e3bd0d681a6f0548912b9');
Now there's a value stored against the name “key,” and we
already had a method called
key
on the storage object: Alarm
bells are ringing, right?
Some browsers, WebKit specifi cally, overwrite the
key
method
with your new value. The knock-on effect is the developer tools
in WebKit make use of the
key
method to enumerate and display
all the data associated with the storage object—so the “Storage”
view for that storage type (
sessionStorage
, in our example) will
now be broken until that value has been removed.
Other browsers such as Firefox will keep the
key
method and
your key value stored separately. Using the expando syntax will
give you the method, and using
getItem('key')
will give you
the value.
NOTE
I expect that as the
browsers continue to
develop, this kind of bug will be
crushed—but in the meantime
I'd say do your very best to
avoid using names that already
exist on the storage API.
Removing data
There are two ways to remove data from the storage object
programmatically:
removeItem
and
clear
. The
removeItem
method
takes a key, the same key used in
setItem
and
getItem
, and
deletes the entry for that particular item.
Using
clear
removes all entries, clearing the entire storage
object. For example:
sessionStorage.setItem('bruce', “Think he's a professor of
¬
synergies”);
sessionStorage.setItem('remy', “Think Bruce is a loony
¬
professor of synergies”);
alert( sessionStorage.length ); // shows 2
sessionStorage.removeItem('bruce');
alert( sessionStorage.length ); // show 1
sessionStorage.clear();
alert( sessionStorage.length ); // shows 0
