Model browser like Mozilla Firefox and Google Chrome are equipped with the HTML5 web storage capabilities which used for storing data in a web browser. This tutorial will guide you on how to store the data by using both local storage and session storage.

Local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Data placed in local storage is persists after the browser is closed. However, session storage is per-page-per-window and is limited to the lifetime of the window.

  1. Let’s create a html file with 5 buttons as following.
    The button’s onclick event will be fired and call each respective function accordingly whenever user click the button.
  2. Insert a <script></script> tag before the </head> tag.
  3. Let’s start to create all the javascript based function within the <script></script> tag now so that each button will carry its own functionality.
  4. To Verify if web storage is supported
  5. Write to local storage
  6. Read from local storage
  7. Write to session storage
  8. Read from session storage
  9. Clear all storage data

The final content of the html file will look similar like the following:

If you open the html file from web browser, you should observe the following screen. Try to click the button to experience the web storage feature powered by HTML5.
HTML5 Web Storage Example
Note: If you have problem with running local file using Google Chrome, try this: Open Local File in Google Chrome