The Different Types of Storage in HTML 5
What is HTML Local Storage?
With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Local storage is per domain. All pages, from one domain, can store and access the same data.
The two storages are session storage and local storage and they would be used to handle different situations.
HTML local storage provides two objects for storing data on the client:
- window.localStorage - stores data with no expiration date
- window.sessionStorage - stores data for one session (data is lost when the tab is closed)
Local storage object
The local Storage object stores the data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year.
Example
- localStorage.setItem("username", "abc");
- document.getElementById("result").innerHTML = localStorage.getItem("username");
Session storage object
The Session Storage is designed for scenarios where the user is carrying out a single transaction but could be carrying out multiple transactions in different windows at the same time.
Example
For example, if a user buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
- SessionStorage.UserName = "abc"
- var username = SessionStorage.UserName