Welcome Guest! (App Version 3.1)

websitnero logo name

Local Storage

Using Local Storage in HTML5

As we know, till HTML 4.01 the only way to store data on the client end was by using cookies. Now, we get to the new options of local storage and session storage. Together they are known as Web Storage.

Local-storage (along with session storage) provides a new way to save data and also the size of data that can be stored has been increased (upto 5 mb - though varies from browser to browser). Using cookies was not a very efficient way to deal with data, as it had nothing to do with server validation but was kept only for some client end calculation.

Also, any data saved in cookies was sent every time a client browser made any request to the server, thereby increasing the load on the server and effecting its overall performance. The data stored in local-storage remains at the client end and is never shared with the server. Thus 'web storage' usage turns more secured and optimized than cookies.

Local Storage is based on per origin policy. This means that the pages from same origin (website or http address) store and access data from the same local-storage point.

Example

<button onclick="alpha()"> Click Me </button>

<script>

function alpha(){
  localStorage.name = "Peter Martin"; 
}

</script>

Following example shows storing an item to local-storage and then alerting it back through function.

Example

<button onclick="alpha()">Click Me</button>
<button onclick="beta()">Click Me too</button>

<script>

function alpha(){
  localStorage.name = "Peter Martin"; 
}

function beta(){
  alert(localStorage.name);
}

</script>

Following example shows 3 ways of setting local-storage item and then alerting one of them back:

Example

<button onclick="alpha()">Click Me</button>
<button onclick="beta()">Click Me too</button>

<script>

function alpha(){
  localStorage.name = "Peter Martin"; 
  localStorage.setItem("city", "New York");
  localStorage["country"] = "USA";
}

function beta(){
  alert(localStorage.name);
}

</script>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.