The topic "HTML5 Features - Local Storage" focuses on a powerful feature introduced in HTML5 that allows developers to store data locally in the user's browser. This data persists even when the browser is closed and reopened, offering a more secure and efficient alternative to cookies.
Explanation
The localStorage object provides a way to store key-value pairs in a browser without expiration. It's ideal for saving user preferences, session details, or application data that doesn't require constant server communication.
Example
Here’s a simple implementation of localStorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Example</title>
<script>
function saveData() {
const inputData = document.getElementById('data').value;
localStorage.setItem('userInput', inputData);
alert('Data saved to local storage!');
}
function loadData() {
const savedData = localStorage.getItem('userInput');
if (savedData) {
document.getElementById('display').textContent = `Saved Data: ${savedData}`;
} else {
document.getElementById('display').textContent = 'No data found in local storage.';
}
}
</script>
</head>
<body>
<h1>HTML5 Local Storage Example</h1>
<input type="text" id="data" placeholder="Enter some data">
<button onclick="saveData()">Save to Local Storage</button>
<button onclick="loadData()">Load Data</button>
<p id="display"></p>
</body>
</html>
How It Works:
Explanation
The localStorage object provides a way to store key-value pairs in a browser without expiration. It's ideal for saving user preferences, session details, or application data that doesn't require constant server communication.
Example
Here’s a simple implementation of localStorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Example</title>
<script>
function saveData() {
const inputData = document.getElementById('data').value;
localStorage.setItem('userInput', inputData);
alert('Data saved to local storage!');
}
function loadData() {
const savedData = localStorage.getItem('userInput');
if (savedData) {
document.getElementById('display').textContent = `Saved Data: ${savedData}`;
} else {
document.getElementById('display').textContent = 'No data found in local storage.';
}
}
</script>
</head>
<body>
<h1>HTML5 Local Storage Example</h1>
<input type="text" id="data" placeholder="Enter some data">
<button onclick="saveData()">Save to Local Storage</button>
<button onclick="loadData()">Load Data</button>
<p id="display"></p>
</body>
</html>
How It Works:
- Saving Data: The saveData() function stores user input in local storage using localStorage.setItem(key, value).
- Retrieving Data: The loadData() function retrieves the data using localStorage.getItem(key) and displays it.
- Persistent Storage: Data saved in localStorage remains even if the browser is closed or refreshed.
- Storage Limit: Up to 5MB of data can be stored in most browsers.
- Secure: Unlike cookies, local storage data is not sent to the server with each request
- No Expiry: Data persists until explicitly deleted using localStorage.removeItem(key) or localStorage.clear().
Comments
Post a Comment