Local Storage vs Cookies
Last Updated :
03 Jan, 2024
In JavaScript, there are three main mechanisms for storing data on the client side: local storage, session storage, and cookies. In this article, we are going to discuss the difference between local storage and cookies.
Let us now understand both of them with their practical implementation inside the code examples.
Cookies
Cookies are small text files that are stored on the user’s computer and sent back to the server with each request. Cookies are limited in size, typically to 4 KB of data, and have restrictions on the data that can be stored, such as the requirement to store values as strings.
Example: The below code example implements the cookies in JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>JavaScript closest()</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
First Click the Set Cookie button to
set the cookie and then Get Cookie
button to get it.
</h3>
<p id="result"></p>
<button id="setBtn">
Set Cookie
</button>
<button id="getBtn">
Get Cookie
</button>
</center>
<script>
const result = document.getElementById('result');
const setBtn = document.getElementById('setBtn');
const getBtn = document.getElementById('getBtn');
function setCookie() {
if(document.cookie.length !== 0){
result.innerHTML =
`Cookie is already settled!!`;
}
else{
document.cookie =
"visitorname: Emrit Kumar;";
}
}
function getCookie(){
if(document.cookie.length !== 0){
result.innerHTML =
`Cookie: <b>${document.cookie}</b>`;
}
else{
result.innerHTML =
`Please set the cookie first!!`;
}
}
setBtn.addEventListener('click', setCookie);
getBtn.addEventListener('click', getCookie);
</script>
</body>
</html>
|
Output:
Applications of cookies:
- Cookies are often used to store small amounts of data, such as user preferences, authentication tokens, and session information.
- They are also used to track user behavior and advertising preferences.
- In addition, cookies can be used to store temporary data, such as the contents of a shopping cart, that need to persist between pages but are not necessary to persist between visits.
Local storage
Local storage, on the other hand, is a more modern technology and is part of the HTML5 specification. It allows for the storage of more data, up to 5 MB, and can store any type of JavaScript object, including arrays and objects. Unlike cookies, local storage is not sent back to the server with each request.
Example: The below code example implements the local storage in JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>JavaScript closest()</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
First Click the Set storage
button to set the storage and
then Get storage button to get it.
</h3>
<p id="result"></p>
<button id="setBtn">
Set Local Storage
</button>
<button id="getBtn">
Get Local Storage
</button>
<button id="deleteBtn">
Delete Local Storage
</button>
</center>
<script>
const result = document.getElementById('result');
const setBtn = document.getElementById('setBtn');
const getBtn = document.getElementById('getBtn');
const deleteBtn = document.getElementById('deleteBtn');
function setStorage() {
if(localStorage.getItem("Username") !== null){
result.innerHTML =
`Storage is already settled!!`;
}
else{
localStorage.setItem("Username", "Emrit Singh");
}
}
function getStorage(){
if(localStorage.getItem("Username") !== null){
result.innerHTML =
`Storage: <b>${localStorage.getItem("Username")}</b>`;
}
else{
result.innerHTML =
`Please set the storage first!!`;
}
}
function delStorage(){
if(localStorage.getItem("Username") !== null){
localStorage.clear();
}
else{
result.innerHTML =
`No storage available to delete!!`;
}
}
setBtn.addEventListener('click', setStorage);
getBtn.addEventListener('click', getStorage);
deleteBtn.addEventListener('click', delStorage);
</script>
</body>
</html>
|
Output:
Applications of local storage:
Local storage is a better option for storing larger amounts of data that needs to persist between visits to a website. For example, it can be used to store user preferences, saved game data, or application state. It can also be used to store data that needs to persist between pages but does not need to be sent back to the server with each request.
Differences Between cookies and local storage
| 4 KB |
5 MB |
| Strings |
Any JavaScript Object |
| Sent with each request |
Not sent with requests |
| Can be set to expire at a specific date or time |
Persists until manually cleared or deleted |
| Can be shared between subdomains with proper configuration |
Limited to the specific domain |
| Can be encrypted for added security |
No encryption, but stored data can be encrypted by the application |
| Can be disabled by users in their browser settings |
Not affected by user browser settings |
| Available in all modern browsers |
Available in all modern browsers |
| Slower than local storage |
Faster than cookies |
| Simple API for basic operations |
More robust API with more advanced operations |
| Best for small amounts of data and for tracking user behavior |
Best for large amounts of data that needs to persist between visits |
Conclusion: When choosing between local storage and cookies, it’s important to consider the amount of data you need to store, as well as the security and privacy requirements of the application. Cookies are a good option for small amounts of data that need to be sent to the server with each request, while local storage is better suited for larger amounts of data that need to persist between visits to the website.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...