What is the mechanism to store the data on the client's browser in HTML ?
Last Updated :
27 Mar, 2022
Server-side storage stores data on the server (i.e. an external database) and client-side storage allow the user to store data on the client (i.e. user's browser).
client-side storage consists of JavaScript APIs that allow you to store data on the client i.e. on the user's machine and then retrieve it when it is needed. This has many different uses such as:
- Personalizing site preferences (for example: showing a user's choice of custom widgets, color scheme, or font size).
- Persisting previous site activity (for example: storing the contents of a shopping cart from a previous session and remembering if a user was previously logged in).
- Saving web application-generated documents locally for offline use.
- Saving data and assets locally so that users will be quicker and less expensive to download, or sometimes used without a network connection.
Web storage and cookies are two ways to store the data in the client browser. They are explained below:
Web Storage: With the help of web storage, web applications can store data locally within the user's browser. During every server request data is stored in the form of cookies.
Advantages:
- Web storage is more secure, and large amounts of data can be locally stored, without affecting website performance.
- The storage limit is larger (at least 5MB) and the information is never transferred to the server.
- The same data is accessed by the pages from the same origin.
The first browser version fully supports Web Storage is given below:
- Chrome: 4.0
- Firefox: 3.5
- Safari: 4.0
- Opera: 11.5
- Internet Explorer/Edge: 8.0
HTML Web Storage Objects: HTML web storage has two objects for storing data on the client:
- window.localStorage: There is no expiry date for the data stored.
- window.sessionStorage: It stores data for one session (data is lost when the browser tab is closed)
First check browser support for localStorage and sessionStorage:
JavaScript
if (typeof (Storage) !== "undefined") {
// This is Code for localStorage/sessionStorage.
} else {
// No Web Storage support is there
}
The localStorage Object: The localStorage object stores the data with no expiry date. The data is not deleted even when the browser is closed.
The sessionStorage Object: It stores the data for only one session. The data is deleted whenever the user closes the specific browser tab.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if (typeof (Storage) !== "undefined") {
localStorage.setItem("name", "Geek");
document.getElementById("result").innerHTML =
localStorage.getItem("name");
} else {
document.getElementById("result").innerHTML =
"your browser does not support Web Storage...";
}
</script>
</body>
</html>
Output:
Geek
Cookies in HTML: Cookies are the data stored in small text files on the computer. They were invented to remember the information of the user. Because when a web server sends the data to the browser and if by any external factors shuts down then the server forgets everything about the user.
When a user visits a web page his data is stored in the form of a cookie. If the same user visits the web page again then the web page remembers the user and provides feeds related to the previously searched items. These cookies are exchanged between web browsers and web servers. Cookies are saved in name-value pairs as:
username = geek
The <meta> tag can be used to store the cookies on the client-side.
Example: In the example below, The value entered in the name field is stored as the cookie in the browser.
HTML
<html>
<head>
<script type="text/javascript">
< !--
function Cookie() {
if (document.myform.customer.value == "") {
alert("Enter some value");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write("Setting Cookies: " +
"name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer" />
<input type="button" value="Set Cookie"
onclick="Cookie();" />
</form>
</body>
</html>
Output:
Similar Reads
What are the different types of storage in HTML5 ? In this article, you will get to know about different types of Web storage in HTML5. The web storage is more secure and large amounts of data can be stored locally on the client-side web browser. All the data is stored in key-value pairs. In HTML5 there are two types of web storage API. localStorage
3 min read
What are the HTML tags used to display the data in the tabular form ? In this article, we will know the HTML tags that can be used to display the data in tabular form. A table is a representation of data in rows and columns, that helps to organize the complex structured data. Tables are widely used in communication, research, and data analysis. For instance, if we nee
4 min read
How to Receive JSON Data at the Client Side ? For sending and receiving data to or from the server JSON format is used. JSON stands for Javascript Object Notation and it is a widely used format nowadays because of its advantages and simplicity. In this article, we will use XML HttpRequest to receive data from the server and use NodeJS for the b
2 min read
What is the Application Cache and why it is used in HTML5 ? The task is to learn about the application cache in HTML5. HTML stands for HyperText Markup Language and it is used to design web pages using a markup language. HTML5 is current or we can also say that it's the 5th version of HTML. Application Cache in HTML5: The current version of HTML5 introduces
2 min read
How to define the HTTP method for sending data to the action URL in HTML5? In this article, we will learn how to define an HTTP method to send data to the action URL. The method attribute is used to indicate how form data can be sent to the given server in the action URL. The form-data may be sent using the GET or POST method depending on the requirement. The differences b
2 min read
What is Server-Sent Events in HTML5 ? Server-Sent events (SSE) provide a seamless way to automatically update web pages without requiring user interaction. These events allow servers to push real-time data to clients over HTTP connections. The updates for any website come via HTTP connections. This way of communication of updating the
3 min read
Which tag is used to display additional information when we click to open or close on demand in HTML ? HTML provides many predefined tags which have some specific functionality for the contribution of developing web pages. In this article, we will learn how to show the additional information when the user clicks to open or close on demand in HTML. This can be simply done with the help of the HTML
1 min read
What are the main functions of HTML DOM ? DOM or Document Object Model is an API(Application Programming Interface) that represents the HTML document in the form of the Tree structure such that programs can access and change the style and structure of the HTML document. The DOM object is automatically created by the web browser itself upon
3 min read
Disable Browser Caching with Meta HTML Tags In the fast-paced internet era, delivering up-to-date content to users is crucial. Browser caching, while speeding up website loading, poses challenges in serving recent updates. Fortunately, developers can leverage meta HTML tags to control caching behaviour, ensuring users receive the latest conte
3 min read
How to Save Data in Local Storage in JavaScript? LocalStorage is a client-side web storage mechanism provided by JavaScript, which allows developers to store key-value pairs directly in the user's browser. Unlike cookies, LocalStorage is persistent—data stored remains even after the browser is closed and reopened, making it ideal for retaining use
2 min read