What Is HTML5 LocalStorage?
It is a system for web pages to locally store the named key / value pairs within the client web browser.
The data aren’t incorporated with each server request; as a result, localStorage is faster. The performance of the website remains unaffected regardless of the size of the data stored.
The localStorage object stores the data without expiration date. Hence, the data is readily available whenever the browser is opened in the future.
Why Use HTML5 Storage?
With HTML5 localStorage, a large amount of data (5MB per application per browser) can be persistently cached on the client-side, offering an alternative to server downloads. A web application can achieve better performance and provide a better user experience if it uses the localStorage. For example, your web application can use local storage to cache data from RPC calls for faster startup and more responsive user interface. Other uses include saving the application state locally for a faster restore when the user re-enters the application, and saving the user’s work if there is a network outage etc.
Here are some of the many benefits of localStorage:
- Reduced network traffic
- Rapid display times
- Cache data from Remote Procedure Call (RPC)
- Load cached data on startup (faster startup)
- Save temporary state
- Restore state upon app re-entry
- Prevent work loss from network disconnects
Note: unlike cookies, items in Storage are not sent along in requests, which helps reduce network traffic.
Three methods are important for the local storage setItem(), getItem() and removeItem().
Using single line code to store your data into your browser
To store data – SetItem()
localStorage.setItem(‘FirstName’, fName);
Name is key and the value is firstName
Ex:
function SetItem() { // save Value to local storage var fName = document.getElementById('Name').value; localStorage.setItem('FirstName', fName); }
To get the stored item – getItem()
localStorage.getItem(‘FirstName’);
Ex:
function GetItem() { // Get Value from local storage var getStoredValue = localStorage.getItem('FirstName'); if (getStoredValue) { document.getElementById('Name').value = getStoredValue; } }
To remove data from browser storage – removeItem()
localStorage.removeItem(‘FirstName’);
Ex:
function RemoveItem() { // Remove Value from local storage localStorage.removeItem('FirstName'); }
Example
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 local storage</title> <script type="text/JavaScript"> function SetItem() { // save Value to local storage var fName = document.getElementById('Name').value; localStorage.setItem('FirstName', fName); } function GetItem() { // Get Value from local storage var getStoredValue = localStorage.getItem('FirstName'); if (getStoredValue) { document.getElementById('Name').value = getStoredValue; } } function RemoveItem() { // Remove Value from local storage localStorage.removeItem('FirstName'); } </script> <body> Name : <input type="text" id="Name" /> <input type="button" value="save" onclick="SetItem()" /> <input type="button" value="Get" onclick="GetItem()" /> <input type="button" value="Remove" onclick="RemoveItem()" /> </body> </html>
Browser Support
localStorage is supported in Internet Explorer 8 & later versions, Firefox, Opera, Chrome, and Safari.
