---
title: "Storing data on Client in HTML5"
description: "In other version of HTML we store data on client machine by using concept of cookies which is not suitable for large data. With the concept of localSt"
author: "Anonymous User"
published: 2011-07-26
updated: 2020-03-04
canonical: https://www.mindstick.com/articles/589/storing-data-on-client-in-html5
category: "html5"
tags: ["html5"]
reading_time: 3 minutes
---
# Storing data on Client in HTML5
In other version of HTML we store data on client machine by using concept of cookies which is not suitable for large data. With the concept of localStorage we will store large volume of data on client machine. Html5 offers two ways to store data on client machine.\
1. **localStorage**: When we stores data on client using LocalStorage mechanism then there is no time limit to lost data. We are able to see that data after one day, or one month or one year.
2. **sessionStorage**:When we store data on client using sessionStorage mechanism then saved datas are available until sessions are expire.
##### Following example will be displayed use of localStorage object.
Design a user interface for application by using following code snippet.
```
```
This will create a user interface which looks like following.
Create a java script method named storeData() and called this method on click event of Save Content in LocalStorage button.
```
function storeData() { localStorage.data = txtSubmitContent.value;}
```
This method will store data on client system.
Create a java script method named getData() which will display data on second text box. This will display storage data.
```
function getData() { txtGetContent.value = ""; if (localStorage.data) txtGetContent.value = localStorage.data; else txtGetContent.value="No Local Data Found."}
```
##### Output of following code snippet is as follows
##### Following example will be displayed use of sessionStorage object
Here we will see that session storage will save data until session of users get expired. Replace all localStorage value with sessionStorage value and execute program to see output.
```
Html5 Learning
```
##### Output of following code snippet is as follows
---
Original Source: https://www.mindstick.com/articles/589/storing-data-on-client-in-html5
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.