HTML5 Web Storage

HTML5 web storage, a better local storage method than cookies.

What is HTML5 web storage?

Use HTML5 to store the user's browsing data locally.

Earlier, local storage used cookies. But web storage needs to be more secure and fast. These data will not be stored on the server, but these data are only used for user request website data. It can also store a large amount of data without affecting the performance of the website.

Data exists as a key/value pair, and the data of a web page is only allowed to be accessed and used.

Browser supports

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support web storage.

Note: Internet Explorer 7 and earlier versions of IE do not support web storage.

localStorage and sessionStorage

The two objects that the client stores data are:

  • localStorage-It is used to save the data of the entire website for a long time. The saved data has no expiration time until it is manually removed.

  • sessionStorage-Used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab.

Before using web storage, you should check whether your browser supports localStorage and sessionStorage:

if(typeof(Storage)!=="undefined")
{
     // Yes! Support localStorage sessionStorage object!
     // Some code.....
} else {
     // Sorry! Web storage is not supported.
}


localStorage Object

There is no time limit for the data stored in the localStorage object. The data will still be available after the next day, the second week, or the next year.

Example

localStorage.sitename="Tutorial Fish";
document.getElementById("result").innerHTML="Site name:" + localStorage.sitename;

 Try It! 

Example analysis:

  • Use key="sitename" and value="Tutorial Fish" to create a localStorage key/value pair.

  • Retrieve the value with the key value "sitename" and insert the data into the element with id="result".

The above example can also be written like this:

// store
localStorage.sitename = "Tutorial Fish";
// find
document.getElementById("result").innerHTML = localStorage.sitename;

Remove "sitename" in localStorage:

localStorage.removeItem("sitename");

Regardless of whether it is localStorage or sessionStorage, the available APIs are the same. The commonly used APIs are as follows (take localStorage as an example):

  • Save data: localStorage.setItem(key,value);

  • Read data: localStorage.getItem(key);

  • Delete a single data: localStorage.removeItem(key);

  • Delete all data: localStorage.clear();

  • Get the key of an index: localStorage.key(index);

Tip: Key/value pairs are usually stored as strings. You can convert the format according to your needs.

The following example shows the number of times the user clicked the button.

The string value in the code is converted to a numeric type:

Example

if (localStorage.clickcount)
{
     localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
     localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button "+ localStorage.clickcount +" times ";

 Try It! 

sessionStorage Object

The sessionStorage method stores data for a session. When the user closes the browser window, the data will be deleted.

How to create and access a sessionStorage:

Example

if (sessionStorage.clickcount)
   {
   sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
   }
else
   {
   sessionStorage.clickcount=1;
   }
document.getElementById("result").innerHTML="You have clicked the button in this session "+ sessionStorage.clickcount +" times ";

 Try It! 

Web Storage Develops A Simple Website Listing Program

The website list program implements the following functions:

  • You can enter the website name and URL, and store it in localStorage with the website name as the key;

  • Find the URL based on the website name;

  • List all currently saved websites;

The following code is used to save and find data:

save() and find() methods

// save data
function save(){
     var siteurl = document.getElementById("siteurl").value;
     var sitename = document.getElementById("sitename").value;
     localStorage.setItem(sitename, siteurl);
     alert("Added successfully");
}
// find data
function find(){
     var search_site = document.getElementById("search_site").value;
     var sitename = localStorage.getItem(search_site);
     var find_result = document.getElementById("find_result");
     find_result.innerHTML = search_site + "The URL is:" + sitename;
}

The complete example demonstration is as follows:

Example

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
     <label for="sitename">Site Name (key):</label>
     <input type="text" id="sitename" name="sitename" class="text"/>
     <br/>
     <label for="siteurl">Web address (value):</label>
     <input type="text" id="siteurl" name="siteurl"/>
     <br/>
     <input type="button" onclick="save()" value="New record"/>
     <hr/>
     <label for="search_site">Enter the site name:</label>
     <input type="text" id="search_site" name="search_site"/>
     <input type="button" onclick="find()" value="find website"/>
     <p id="find_result"><br/></p>
</div>

 Try It! 

Screenshot of the effect:

image.png

The above examples only demonstrate simple localStorage storage and search. In more cases, the data we store will be more complicated.

Next we will use JSON.stringify to store object data, JSON.stringify can convert objects into strings.

var site = new Object;
...
var str = JSON.stringify(site); // convert the object to a string

Then we use the JSON.parse method to convert the string into a JSON object:

var site = JSON.parse(str);

JavaScript implementation code:

save() and find() methods

//save data  
function save(){
     var site = new Object;
     site.keyname = document.getElementById("keyname").value;
     site.sitename = document.getElementById("sitename").value;
     site.siteurl = document.getElementById("siteurl").value;
     var str = JSON.stringify(site); // convert the object to a string
     localStorage.setItem(site.keyname,str);
     alert("Save successfully");
}
//Find data
function find(){
     var search_site = document.getElementById("search_site").value;
     var str = localStorage.getItem(search_site);
     var find_result = document.getElementById("find_result");
     var site = JSON.parse(str);
     find_result.innerHTML = search_site + "The site name is: "+ site.sitename + ", the URL is:" + site.siteurl;
}

The complete example is as follows:

Example

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
     <label for="keyname">Alias (key):</label>
     <input type="text" id="keyname" name="keyname" class="text"/>
     <br/>
     <label for="sitename">Site name:</label>
     <input type="text" id="sitename" name="sitename" class="text"/>
     <br/>
     <label for="siteurl">Website:</label>
     <input type="text" id="siteurl" name="siteurl"/>
     <br/>
     <input type="button" onclick="save()" value="New record"/>
     <hr/>
     <label for="search_site">Enter the alias (key):</label>
     <input type="text" id="search_site" name="search_site"/>
     <input type="button" onclick="find()" value="find website"/>
     <p id="find_result"><br/></p>
</div>

Try It! 

The loadAll in the example outputs all the stored data. You need to ensure that the data stored in localStorage is in JSON format, otherwise JSON.parse(str) will report an error.

Demonstration of output results:

image.png