Frond End Data Storage
HTML Local Storage from w3schools.com
HTML5 - Web Storage from Tutorialspoint.com
Cookie is the most efficient method of remembering and tracking small amount of information in client side.
Web storage is for large amount of data.
So far, Web storage is widely supported by most browsers, from IE8 to most of mobile browser(except Opera Mini). So when I needs to store a large amount of data with capability requirement for most browsers, this is currently my best choice.
There are two parts of web storage: local storage and session storage.
Data for web storage are passed by
Compared to session storage, local storage has no expiration time.
localStorage object can be used directly. Like
To remove a key-value pair, use
to clear all key-value pair, use
getItem('key','value') and setItem('key','value') is used to get/set data item.
Here is an example from W3CSchool:
// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Use direct attribute
Another way is to assign attribute to
// Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname;
Following a difference between local storage and session storage:
For session storage, data are lost after session end. i.e. data are delete after use close a browser window/tab.
For session storage, opening a page in new tab or window will cause a new session to be initiated.
The way to use session storage is the same as the way to use local storage, except the object is now