The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
There mechanism are available via the global Window object window.localStorage and window.sessionStorage.
Data stored in localStorage is available even after the browser is closed, even after system turns off and on or restart.
The storage size is depends on the browser but it has the maximum storage limit among sessionStoage and cookie. 10 MB is the localStorage size in Google Chrome browser.
localStorage.setItem('my_localstoage_variable', 'Local Storage Value');
setItem & getItem
setItem is used to set the value in local/sessionStorage while getItem is used to get the item from the local/sessionStorage using the variable name.
localStorage.setItem("Name", "jQuery Pro");
use below statement to get the above value.
sessionStorage is same as localStorage only the difference is the validity of the variable or objects stored in this is temporary i.e. until the browser or tabs in closed. As soon as tab / browser is closed, data are lost. Data are never sent to server using this. Storage limit is lesser than localStorage which is 5 MB.
Same as in localStorage, get and set Item are used to get and set the value.
Watch out below video to understand and see live example of localStorage and sessionStorage.