What is Local Storage in HTML5 ?
The Local Storage is a client side web storage database which is used to store the data in the form of key/value pairs.
Using Local Storage, we can store the data of at least 5MB.
It provides javascript based API to write and get the data.
In modern browsers, we can use Local Storage very easily. HTML5 Local Storage provides two objects for storing the data on client side:
window.localStorage This object is used to store data with no expiration date
window.sessionStorage This object is used to store for one session (data is lost when the tab is closed)
Below is the example, which demonstrate how to write and retrieve the data:
To write the data: The setItem() method is used to write the data using key and value pair:
localStorage.setItem('Color','red');
Note: In below setItem() method, there is used KEY which is Color and VALUE which is red.
To get the data: The getItem() method is used to get the data using KEY:
var color = localStorage.getItem('Color');
To remove the data: The removeItem() method is used to remove the data using KEY:
localStorage.removeItem('Color');
var color = localStorage.getItem('Color');
How to check browser support for Local Storage ?
Below is the method to check for Local Storage Support:
if(typeof(Storage) !== "undefined") {
// Local Storage is available
} else {
// Local Storage support is not available
}
Browser support for Local Storage:
| Browser |
Version |
| Chrome |
4.0 |
| IE |
8.0 |
| Firefox |
3.5 |
| Opera |
4.0 |
| Safari |
11.5 |
0 Comment(s)