Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
I need a client side browser database in HTML5. What are my options?
HTML5 provides several client-side storage options for web applications. These technologies allow you to store data directly in the user's browser without requiring a server connection, making your applications faster and more responsive.
The main client-side storage options in HTML5 include Local Storage, Session Storage, IndexedDB, and Web SQL Database (deprecated). Each serves different use cases based on data persistence, storage capacity, and complexity requirements.
Local Storage
Local Storage is the most commonly used client-side storage mechanism. It stores data as key-value pairs and persists data until explicitly cleared by the user or the application. The data remains available across browser sessions and tabs.
Syntax
Following are the main Local Storage methods −
// Store data localStorage.setItem(key, value); // Retrieve data localStorage.getItem(key); // Remove specific item localStorage.removeItem(key); // Clear all data localStorage.clear();
Example − Basic Local Storage Usage
Following example demonstrates storing and retrieving user data with Local Storage −
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Preferences</h2>
<input id="username" type="text" placeholder="Enter your name">
<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<button onclick="clearData()">Clear</button>
<div id="result" style="margin-top: 20px; padding: 10px; background: #f0f0f0;"></div>
<script>
function saveData() {
var name = document.getElementById("username").value;
if (name) {
localStorage.setItem("userName", name);
document.getElementById("result").innerHTML = "Data saved: " + name;
}
}
function loadData() {
var savedName = localStorage.getItem("userName");
if (savedName) {
document.getElementById("username").value = savedName;
document.getElementById("result").innerHTML = "Data loaded: " + savedName;
} else {
document.getElementById("result").innerHTML = "No data found";
}
}
function clearData() {
localStorage.removeItem("userName");
document.getElementById("username").value = "";
document.getElementById("result").innerHTML = "Data cleared";
}
</script>
</body>
</html>
The data persists even after closing and reopening the browser. Try entering a name, saving it, then refreshing the page and clicking Load.
Example − Hit Counter with Local Storage
Following example shows a persistent hit counter using Local Storage −
<!DOCTYPE html>
<html>
<head>
<title>Hit Counter</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Page Visit Counter</h2>
<div id="counter" style="font-size: 24px; color: #007bff; margin: 20px 0;"></div>
<p>Refresh the page to increase the counter.</p>
<button onclick="resetCounter()">Reset Counter</button>
<script>
function updateCounter() {
let hits = localStorage.getItem("pageHits");
if (hits === null) {
hits = 0;
}
hits = parseInt(hits) + 1;
localStorage.setItem("pageHits", hits);
document.getElementById("counter").innerHTML = "Total Visits: " + hits;
}
function resetCounter() {
localStorage.setItem("pageHits", "0");
document.getElementById("counter").innerHTML = "Total Visits: 0";
}
// Update counter on page load
updateCounter();
</script>
</body>
</html>
The counter increases each time you refresh the page and persists across browser sessions.
Session Storage
Session Storage is similar to Local Storage but with a key difference: data is only available for the duration of the page session. When the browser tab is closed, the data is automatically removed.
Syntax
// Store data (session only) sessionStorage.setItem(key, value); // Retrieve data sessionStorage.getItem(key); // Remove item sessionStorage.removeItem(key); // Clear all session data sessionStorage.clear();
Example − Session Storage Usage
<!DOCTYPE html>
<html>
<head>
<title>Session Storage Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Session Data</h2>
<input id="sessionInput" type="text" placeholder="Enter session data">
<button onclick="saveSession()">Save to Session</button>
<button onclick="loadSession()">Load Session</button>
<div id="sessionResult" style="margin-top: 15px; padding: 10px; background: #ffe6e6;"></div>
<script>
function saveSession() {
var data = document.getElementById("sessionInput").value;
sessionStorage.setItem("sessionData", data);
document.getElementById("sessionResult").innerHTML = "Session data saved: " + data;
}
function loadSession() {
var data = sessionStorage.getItem("sessionData");
if (data) {
document.getElementById("sessionInput").value = data;
document.getElementById("sessionResult").innerHTML = "Session data loaded: " + data;
} else {
document.getElementById("sessionResult").innerHTML = "No session data found";
}
}
</script>
</body>
</html>
Session Storage data will persist when you refresh the page but will be lost when you close the browser tab.
IndexedDB
IndexedDB is a powerful, low-level API for storing large amounts of structured data. Unlike Local Storage's key-value limitation, IndexedDB can store complex objects, files, and supports transactions and indexes.
IndexedDB is asynchronous and provides much larger storage capacity (typically several hundred MB or more) compared to Local and Session Storage (usually 5-10MB limit).
Example − Basic IndexedDB Usage
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>IndexedDB Demo</h2>
<input id="nameInput" type="text" placeholder="Name">
<input id="emailInput" type="text" placeholder="Email">
<button onclick="addUser()">Add User</button>
<button onclick="getUsers()">Show Users</button>
<div id="userList" style="margin-top: 20px;"></div>
<script>
let db;
// Open database
const request = indexedDB.open("UserDatabase", 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
objectStore.createIndex("name", "name", { unique: false });
};
request.onsuccess = function(event) {
db = event.target.result;
};
function addUser() {
const name = document.getElementById("nameInput").value;
const email = document.getElementById("emailInput").value;
if (name && email) {
const transaction = db.transaction(["users"], "readwrite");
const objectStore = transaction.objectStore("users");
objectStore.add({ name: name, email: email });
document.getElementById("nameInput").value = "";
document.getElementById("emailInput").value = "";
document.getElementById("userList").innerHTML = "User added successfully!";
}
}
function getUsers() {
const transaction = db.transaction(["users"], "readonly");
const objectStore = transaction.objectStore("users");
const request = objectStore.getAll();
request.onsuccess = function(event) {
const users = event.target.result;
let html = "<h3>Stored Users:</h3>";
users.forEach(user => {
html += `<p>${user.name} - ${user.email}</p>`;
});
document.getElementById("userList").innerHTML = html;
};
}
</script>
</body>
</html>
IndexedDB allows storing complex structured data with relationships, making it suitable for offline-capable web applications.
Storage Options Comparison
Following table compares the main client-side storage options available in HTML5 −
| Storage Type | Persistence | Storage Limit | Data Type | API Complexity | Best Use Case |
|---|---|---|---|---|---|
| Local Storage | Until cleared | 5-10MB |
512 Views
