Child

HTML5 Web Storage



As few times ago we were using the cookies to store the browser data. Now with the HTML5 WEB STORAGE we can also store the browser data. With this feature of HTML5 we can store data locally within the user’s browser

There are two methods that is used to store the data

  • localStorage
  • sessionStorage

localStorage: Which is used to store the data locally. It stores the data with no expiration data, means if browser is closed then it will not delete the data and we can view the data any time and even after year.

Example of localStorage

OutPut:

Here is the code for localStorage:

<div id="result"></div>
<script>// <![CDATA[
if(typeof(Storage)!=="undefined")
{
localStorage.websitename="HTML5";
document.getElementById("result").innerHTML="Website Name: " + localStorage.websitename;
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support HTML5 web storage feature.";
}
// ]]></script>

Another example of localStorage with Hit Count

Here is the code for localStorage Hit Count

<!DOCTYPE html>
<html>
<head>
<script>// <![CDATA[
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the HTML5 button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
// ]]></script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">HTML5</button></p>
<div id="result"></div>
<p>Click the HTML5 button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the HTML5 button will continue counting with previous result.</p>
</body>
</html>

sessionStorage: It is also used the store the browser’s data locally, but it is for limited period (for one session), when we close the browser, it will automatically delete the stored data and we can’t see the browser’s stored data again.

output for sessionStorage

Click the HTML5 button to see the counter increase.

Close the browser tab (or window), and try again, You would not be able to see the previous result.

Click the HTML5 button to see the counter increase.

Close the browser tab (or window), and try again, You would not be able to see the previous result.

Here is the code for sessionStorage:

<!DOCTYPE html>
<html>
<head>
<script>// <![CDATA[
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
// ]]></script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">HTML5</button></p>
<div id="result"></div>
<p>Click the HTML5 button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, You would not be able to see the previous result.</p>
</body>
</html>