Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Easy JavaScript Web Storage Code

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

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

lengthThe 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
  // 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">

function storeItem()
var keyword = document.getElementById("keyword").value;
var value = document.getElementById("value").value;
localStorage.setItem(keyword, value);


<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()">


RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268