nr_kavali@rediffmail.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local Storage Data Entry & Search</title>
</head>
<body>
<h1>Data Entry</h1>
<form id="dataEntryForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="value">Value:</label>
<input type="text" id="value" required>
<button type="submit">Save Data</button>
</form>
<hr>
<h1>Search Data</h1>
<input type="text" id="searchInput" placeholder="Search by name...">
<button onclick="searchData()">Search</button>
<button onclick="displayAllData()">Display All</button>
<p id="resultsList"></p>
<script src="script.js"></script>
</body>
</html>
<script>
document.getElementById('dataEntryForm').addEventListener('submit', function(e) {
e.preventDefault();
const nameInput = document.getElementById('name');
const valueInput = document.getElementById('value');
const name = nameInput.value;
const value = valueInput.value;
if (name && value) {
// Retrieve existing data, or initialize an empty array
const storedData = JSON.parse(localStorage.getItem('dataEntries')) || [];
// Add new entry
storedData.push({ name: name, value: value });
// Save back to local storage after converting to a string
localStorage.setItem('dataEntries', JSON.stringify(storedData));
alert('Data saved successfully!');
nameInput.value = '';
valueInput.value = '';
displayAllData(); // Refresh the list
}
});
function displayAllData() {
const resultsList = document.getElementById('resultsList');
resultsList.innerHTML = ''; // Clear previous results
const storedData = JSON.parse(localStorage.getItem('dataEntries')) || [];
if (storedData.length === 0) {
resultsList.innerHTML = '<li>No data stored yet.</li>';
return;
}
storedData.forEach(item => {
const li = document.createElement('li');
li.textContent = `Name: ${item.name}, Value: ${item.value}`;
resultsList.appendChild(li);
});
}
function searchData() {
const searchInput = document.getElementById('searchInput');
const searchTerm = searchInput.value.toLowerCase();
const resultsList = document.getElementById('resultsList');
resultsList.innerHTML = ''; // Clear previous results
const storedData = JSON.parse(localStorage.getItem('dataEntries')) || [];
if (searchTerm === '') {
displayAllData(); // If search is empty, show all
return;
}
const filteredData = storedData.filter(item => {
// Search by name field
return item.name.toLowerCase().includes(searchTerm);
});
if (filteredData.length === 0) {
resultsList.innerHTML = '<li>No matching entries found.</li>';
return;
}
filteredData.forEach(item => {
const li = document.createElement('li');
li.textContent = `Name: ${item.name}, Value: ${item.value}`;
resultsList.appendChild(li);
});
}
// Display existing data when the page loads
document.addEventListener('DOMContentLoaded', displayAllData);
</script>
Comments
Post a Comment