Having fun with HTML5 — Local Storage and Session Storage
API
The full API specification for the localStorage and sessionStorage objects can be found here. At the time of writing, this is how the common Storage interface look:
Demo
I’ve put together a quick demo here to illustrate how to detect and use the local and session storage to get, set, remove and clear stored items (well, basically, covers each of the available methods on the Storage interface above).
The page itself is simple and crude, just a couple of <div> and most importantly two tables which I use to show all the key value pairs stored in the local and session storage:
Introducing the new placeholder attribute
You might have noticed that the two text boxes had placeholder text similar to that familiar search box in Firefox:
This is done using HTML5’s placeholder attribute for the <input> tag:
1 2 | <input id="keyText" placeholder="Enter key"/><input id="valueText" placeholder="Enter value"/> |
Nice and easy, eh? 
Setting an item
To add a new key value pair or update the value associated with an existing key, you just have to call the setItem method on the intended storage object:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // adds a new key to both local and session storagefunction setKey() { var key = $("#keyText").val(); var value = $("#valueText").val(); if (Modernizr.localstorage) { localStorage.setItem(key, value); } if (Modernizr.sessionstorage) { sessionStorage.setItem(key, value); } showKeys();} |
Removing an item
Earlier in the showStorageKeys(type, table) function, I added a row to the relevant table for each key value pair in the storage including a button with a handler for the onclick event. The handlers are created with the correct storage type (“local” or “session”) and key for the current row baked in already so that they will call the removeItem(type, key) function with the correct parameters:
1 2 3 4 5 6 7 | // removes an item with the specified key from the specified type of storagefunction removeItem(type, key) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; storage.removeItem(key); showKeys();} |
Clearing all items
Finally, the ’”Clear” buttons underneath the tables call the clearLocalKeys() and clearSessionKeys() function to remove all the key value pairs in the corresponding storage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function clearLocalKeys() { clearKeys("local");}function clearSessionKeys() { clearKeys("session");}// clear all the held keys in the specified type of storagefunction clearKeys(type) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; // clear the keys storage.clear(); showKeys();} |
(0) 
(0)Posted by 홍반장
