YouTipHtml5 Webstorage
* * *
HTML5 Web Storage — a better local storage mechanism than cookies.
* * *
## What is HTML5 Web Storage?
HTML5 enables storing user browsing data locally.
Earlier, local storage was implemented using cookies. However, Web Storage requires greater security and speed. This data is not saved on the server, but is only used for the user’s requests to the website’s data. It can also store large amounts of data without affecting website performance.
Data is stored as key/value pairs, and web page data is accessible only by that specific web page.
* * *
## Browser Support
; data is deleted when the window or tab is closed.
Before using Web Storage, check whether the browser supports localStorage and sessionStorage:
if(typeof(Storage)!=="undefined"){}else{}
* * *
## The localStorage Object
Data stored in the localStorage object has no time limit — it remains available the next day, next week, or even next year.
## Example
localStorage.setItem("sitename", ""); document.getElementById("result").innerHTML = "Website name: " + localStorage.getItem("sitename");
[Try it yourself »](
Example explanation:
* Creates a localStorage key/value pair with **key="sitename"** and **value=""**.
* Retrieves the value associated with the key "sitename" and inserts the data into the element with id="result".
The above example can also be written as follows:
localStorage.sitename = ""; document.getElementById("result").innerHTML = localStorage.sitename;
To remove "sitename" from localStorage:
localStorage.removeItem("sitename");
Both localStorage and sessionStorage support identical APIs. Commonly used methods (using localStorage as an example) include:
* Store data: localStorage.setItem(key,value);
* Retrieve data: localStorage.getItem(key);
* Remove a single item: localStorage.removeItem(key);
* Clear all data: localStorage.clear();
* Get the key at a given index: localStorage.key(index);
**Tip:** Key/value pairs are typically stored as strings; you may convert them to other formats as needed.
The following example counts how many times a user has clicked a button.
The code converts the string value 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 + " time(s).";
[Try it yourself »](
* * *
## The sessionStorage Object
The sessionStorage method stores data for a single session. Data is deleted when the user closes the browser window.
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 this button " + sessionStorage.clickcount + " time(s) during this session.";
[Try it yourself »](
* * *
## Developing a Simple Website List Application Using Web Storage
The website list application implements the following features:
* Input a website name and URL, storing the URL using the website name as the key in localStorage;
* Look up the URL based on the website name;
* List all currently saved websites;
The following code handles saving and searching data:
## save() and find() Methods
function save(){var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("Added successfully"); }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 + "'s URL is: " + sitename; }
A complete working example is shown below:
## Example
[Try it yourself »](
Screenshot of the working result:
!(
The above example only demonstrates simple localStorage storage and retrieval. In most real-world scenarios, the data stored tends to be more complex.
Next, we will use [JSON.stringify]( to store object data. [JSON.stringify]( converts objects into strings.
var site = new Object; ... var str = JSON.stringify(site);
Then, we use the [JSON.parse]( method to convert the string back into a JSON object:
var site = JSON.parse(str);
JavaScript implementation code:
## save() and find() Methods
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); localStorage.setItem(site.keyname,str); alert("Saved successfully"); }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 + "'s website name is: " + site.sitename + ", and its URL is: " + site.siteurl; }
A complete working example is shown below:
## Example
[Try it yourself »](
In the example, the loadAll function outputs all stored data. You must ensure all data stored in localStorage is in valid JSON format; otherwise, JSON.parse(str) will throw an error.
Output demonstration:
!(