HTML and CSS Reference
If sessionStorage had stored the value as a number, you would
see an alert box showing 17. Instead, the cost of $12 was saved
catenation as it does for addition (for example, the plus symbol),
alert box actually shows 125—much more than you'd probably
be willing to pay to watch any video of Bruce! What's going on
here is type coercion: upon storing the data in the storage API,
the data type is coerced into a string.
Finally, it's worth noting that if the key doesn't exist when you
call getItem , the storage API will return null. If you're planning to
use the storage API to initialise values, which is quite possible,
test for null before proceeding because it can throw a pretty
nasty spanner in the works if you try to treat null as any other
type of object.
Ways to access storage
Yo u ' r e p r o b a b l y t h i n k i n g , “ H a n g o n a m i n u t e , R e m y s h o w e d m e
how to grok web storage in 15 seconds, but how does all this
getItem , setItem stuff relate?” I'm glad you're paying attention.
If you look back at the API, you'll see that getItem , setItem, and
removeItem are a getter , setter, and deleter , respectively. This
means that when we call delete localStorage.superVillain ,
spotted that already, good for you. Pat yourself on the back.
An expando is a short and expressive way of getting, setting,
and deleting data out of the storage object, and as both ses-
sionStorage and localStorage descend from the Web Storage
API, they both support this method of accessing the data.
Using our example of storing a Twitter screen name, we can do
the same thing using expandos:
sessionStorage.twitter = '@rem';
alert( sessionStorage.twitter ); // shows @rem
Remember the expando method of storing values is also subject
to the “stringifying” of values as we saw in the previous exam-
ple, with Bruce's video website, because it's going via the setter
method of setItem .