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.

 

 

Tags: Technology | Comments Off

previous post: Move Solution from Microsoft Dynamics CRM 2011 Update Rollup 12 to Down Level Organization next post: Creation of ODATA Web Services in NAV 2013 and consuming data in excel

Comments are closed.

Archives

2016
2015
2014
2013
2012
Congruent Facebook Twitter Slideshare