May 1st 2020
In HTML 5 we have a new feature called Local Storage which is also known as Web Storage or Browser Storage, and this feature allow web applications to store data locally on the user’s browser. Before Web Storage, Browser Cookies were supposed to hold the application data such as login details and password, and still many browsers give support for the cookie storage.
These new features in HTML5 introduced as HTML5 APIs, and there are two of these API’s sessionStorage and localStorage, and these two APIs also known as HTML web storage objects.
Problems with Cookies!
Many web-site and browser use cookie memory to store important data of the application and this cookie memory is stored in the user browser as well as it sent back to the web-server, for instance cookie help you to store the login information of the sites so you could able to log in automatically.
Security is the major concern of cookies, and with the cookies our search and browser history can be tracked. The size of the cookie also a big problem, the size of a cookie could only be 4KH, however the browser allows you to have 30 to 50 cookies, but if your cookie size exceed the 4 KB limit than the data of cookie will be stored into another cookie.
Web Storage provides the solution for the cookies limitations, it basically provides two major features, first, it provides a simple API to set and get key: value pairs and second, it provides us with a large amount of disk space as compared to cookies, web storage provide us with 5 to 10 MB of local browser storage.
Web Storage Objects
In HTML5 we have two objects for storing the data on the user browser:
The localStorage object store the data on the user browser for a lifetime unless the user itself delete or flush the localStorage data from its browser, it does not matter if the user closes the window or tab the data will be remain in the browser unless the browser is delete of the memory of the browser is cleared.
localStorage.setItem("Name", "Luffy"); var user_name = localStorage.getItem("Name"); document.write(user_name);
Behind the Code:
Here in the example we have used the localStorage object and its setItem() method to set a key “Name” and value “Luffy” pair, using the localStorage.getItem(“Name”); statement we retrieve the value Luffy by using its key Name.
Using the method removeItem() we can remove the data.
The sessionStorage is similar to the localStorage but its lifespan remains till its current tab or its session is on, once you close the tab or terminate the session or even close the window the data on sessionStorage also get lost.
sessionStorage.setItem("Geust_user", "Luffy"); var user_name = sessioinStorage.getItem("Geust_user"); document.write(user_name);
Difference Between Cookies, localStorage and SessionStorage
<table> <tbody> <tr> <td><strong>Parameters</strong></td> <td><strong>Cookies</strong></td> <td><strong>localStorage</strong></td> <td><strong>sessionStorage</strong></td> </tr> <tr> <td>Browser Support</td> <td>HTML 4/5</td> <td>HTML5</td> <td>HTML5</td> </tr> <tr> <td>Data Access window</td> <td>Can be accessed through any window</td> <td>Can be accessed through any window</td> <td>Data can be accessed through Same tab</td> </tr> <tr> <td>Life Span</td> <td>Never Expire automatically</td> <td>Never Expire Automatically</td> <td>Expire when the tab is close</td> </tr> <tr> <td>Storage Location</td> <td>Browser and server</td> <td>browser</td> <td>Browser</td> </tr> <tr> <td>Sent to server</td> <td>Sent to the server with every request</td> <td>Data does not send to the server with every request</td> <td>Data does not send to the server with every request</td> </tr> <tr> <td>Capacity</td> <td>4KB</td> <td>10 MB</td> <td>5 MB</td> </tr> </tbody> </table> #BBD0E0 »
There is also a major drawback of localStorage and sessionStorage, we can only store string using these two objects, however, we can also use the string to represent JSON object by using JSON.stringify()and JSON.parse() methods.