Easy JavaScript Web Storage Code
By Stephen Bucaro
In the past allowing web pages to store data on your PC was considered too dangerous.
One method to store data on your PC is cookies. But severe limitations were imposed
on cookies. A cookie can not be larger than 4096 bytes, a maximum of only 20 cookies
can be stored per domain, and only 300 cookies total can be stored.
Cookies can not be considered permanent and reliable storage. If there is other code
setting cookies on the user's browser, for example advertising banners, the 20 cookies
per domain maximum could quickly be exceeded. When you exceed the maximum, the browser
deletes the oldest cookies and retain the most recent 20.
Now, HTML version 5 brings us web storage, providing methods to store keyword/value
data pairs in the user's browser. And all modern browsers support web storage, you have
to go way back to Internet Explorer version 7 and Chrome, Firefox, and Safari version
3 before you lose support.
Web Storage Methods
| Method | Description |
| setItem(key, value) | Adds a key/value pair to web storage |
| getItem(key) | Retrieves a value based on its key |
| removeItem(key) | Removes a key/value pair from the web storage based on its key |
| clear() | Clears all key/value pairs from web storage |
| key(index) | Retrieves the value for key[index] |
Web Storage Attributes
| Attribute | Description |
| length | The number of key/value pairs in web storage |
Similar to cookies, web storage provides sessionStorage to preserve data only while
the user's browser is accessing your site, and localStorage which preserves data
(almost) permanently. Both interfaces use the same methods, only the prefix is different,
so these examples will use only localStorage.
With web storage you can store up to 5MB of data in the user's browser. All data that was
stored by a specific domain shares the same storage area, so you can share data between multiple
pages. The data is persistent on the client's machine, so you can used it to store data for
a long time. Web storage cannot hold binary data (only strings), and code can't be executed
from the web storage area, so it's reasonably safe.
Checking the Browser for Web Storage Support
As I stated earlier, all modern browsers support web storage, but if you want to check for
support before you use web storage, the code for that is shown below.
if(typeof(Storage)!== "undefined")
{
// Web storage is supported
}
else
{
// Web storage is NOT supported
}
Setting a keyword/value Pair
The keyword and value that you store will be stored as strings. You are allowed to put
spaces in the keyword or value To store data to web storage, use the
localStorage.setItem(keyword, value) method. The code for this is shown below.
<!Doctype html>
<html lang="en">
<head>
<script>
function storeItem()
{
var keyword = document.getElementById("keyword").value;
var value = document.getElementById("value").value;
localStorage.setItem(keyword, value);
}
</script>
</head>
<body>
<form name="form">
Keyword: <input type="text" name="keyword" id="keyword"><br />
Value: <input type="text" name="value" id="value"><br />
<input type="button" name="store" id="store" value="Store" onclick="storeItem()">
</form>
</body>
</html>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
