Data Storage
In JavaScript, Session Storage and Local Storage are two types of Web Storage APIs that allow
you to store key-value pairs in a user's browser.
Key Differences
Feature localStorage sessionStorage
Lifetime Until explicitly deleted Until browser/tab closes
Shared across tabs/windows of
Scope Only for the current tab
same origin
Storage Limit ~5–10 MB ~5–10 MB
Persistence Persistent Temporary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Storage Demo App</title>
</head>
<body>
<h2>Welcome to the Storage Demo</h2>
<input type="text" id="username" placeholder="Enter your name" />
<button onclick="saveName()">Save Name</button>
<button onclick="clearName()">Clear Name</button>
<p id="greeting"></p>
<p id="session-counter"></p>
<script>
// Load name from localStorage
function loadName() {
const name = localStorage.getItem('username');
if (name) {
document.getElementById('greeting').textContent = `Hello, ${name}! 👋`;
} else {
document.getElementById('greeting').textContent = 'Please enter your name above.';
}
}
// Save name to localStorage
function saveName() {
const name = document.getElementById('username').value;
if (name) {
localStorage.setItem('username', name);
loadName();
}
}
// Clear name from localStorage
function clearName() {
localStorage.removeItem('username');
loadName();
}
// Session counter
function updateSessionCount() {
let count = sessionStorage.getItem('visitCount');
count = count ? parseInt(count) + 1 : 1;
sessionStorage.setItem('visitCount', count);
document.getElementById('session-counter').textContent =
`You've visited this page ${count} time(s) during this session.`;
}
// Initialize
window.onload = function () {
loadName();
updateSessionCount();
};
</script>
</body>
</html>
cookie
In JavaScript, cookies are small pieces of data stored on the client-side (in the browser) and
associated with a specific domain. They are typically used for storing user preferences, session
info, or tracking.
Creating a Cookie
You create a cookie by setting the document.cookie property:
document.cookie = "username=JohnDoe";
You can also specify optional attributes like expiration, path, domain, and secure flag:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
To extract specific cookies, you can parse the
string:
function getCookie(name) {
const cookies = document.cookie.split("; ");
for (let cookie of cookies) {
const [key, value] = cookie.split("=");
if (key === name) return value;
}
return null;
}
Reading Cookies
To read cookies:
console.log(document.cookie);
This returns a string with all cookies separated by semicolons:
"username=JohnDoe; theme=dark"
Deleting a Cookie
To delete a cookie, set its expiry date in the past:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Limitations
Cookies are limited to around 4KB in size.
Sent with every HTTP request (unless HttpOnly or Secure is used).
Not ideal for storing large or sensitive data — consider localStorage or sessionStorage for more
secure or larger client-side data.
