How to use Local Web storage in HTML5

In this article, I will go to explain Local Web storage in HTML5.
  • 1866

Local Web Storage in HTML5

  • Local Storage is used for storing key value pairs on the client side.

  • Local Storages per browser not per computer

  • Local Storage object stores the data with no expiration date.

  • Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session.

  • Local Storage data will not be deleted when the browser is closed, and will be available the next day, week, or year.

  • Local Storages per browser not per computer

  • Local storage is available in the browser to all windows with the same origin (domain).

  • HTML5 introduces the localStorage attribute which would be used to access a page's local storage area without no time limit.

Example

Following example is the set a local storage variable and access that variable every time this page is accessed, even next time when you open the window

<!DOCTYPE HTML>

<html>

<body>

   <script type="text/javascript">

      if (localStorage.hits)

      {

          localStorage.hits = Number(localStorage.hits) + 1;

      }

      else

      {

          localStorage.hits = 1;

      }

      document.write("Total Number of Hits :" + localStorage.hits);

  </script>

  <p>Refresh the page to increase number of hits.</p>

  <p>Close the window and open it again and check the result.</p>

  </body>

</html>

Output

local web storage.jpg

Further Readings

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.