.png)
Curd operation with localstorage in javascript
Curd Operation in Localstorage Javascript .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#update {
display: none;
}
</style>
</head>
<body>
<center>
<table>
<h1>Add Record</h1>
<tr>
<td>Name :</td>
<td><input type="text" id="uname"></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="email" id="uemail"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><button id="submit" onclick="adddata()">Submit</button>
<button id="update">Update</button>
</td>
</tr>
</table>
<h1>All data is </h1>
<table border="1" id="mytable">
</table>
</center>
<script>
// Insertion data in localstorage
function adddata() {
var unm = document.getElementById("uname").value;
var ueml = document.getElementById("uemail").value;
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
employeeList.push({
Name: unm,
Email: ueml,
})
localStorage.setItem("employee", JSON.stringify(employeeList));
document.getElementById("uname").value = "";
document.getElementById("uemail").value = "";
document.onload(showdata());
}
document.onload(showdata());
// Retrive Data from localstorage
function showdata() {
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
var data = "";
data += "<tr>";
data += "<th> Name </th>";
data += "<th> Email </th>";
data += "<th> Delete </th>";
data += "<th> Edit </th>";
data += "</tr>";
employeeList.forEach((element, index) => {
data += "<tr>";
data += "<td>";
data += element.Name;
data += "</td>";
data += "<td>";
data += element.Email;
data += "</td>";
data += `<td><button onclick="deletedata(${index})">Delete</button></td>`;
data += `<td><button onclick="editdata(${index})">Edit</button></td>`;
data += "</tr>";
});
document.getElementById("mytable").innerHTML = data;
}
// Delete Data from localstorage
function deletedata(index) {
var employeeList;
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
employeeList.splice(index, 1);
localStorage.setItem("employee", JSON.stringify(employeeList));
showdata();
}
// update data from localstorage
function editdata(index) {
document.getElementById("submit").style.display = "none";
document.getElementById("update").style.display = "block";
var employeeList;
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
document.getElementById("uname").value = employeeList[index].Name;
document.getElementById("uemail").value = employeeList[index].Email;
document.querySelector("#update").onclick = function () {
var n = document.getElementById("uname").value;
var e = document.getElementById("uemail").value;
employeeList[index].Name = n;
employeeList[index].Email = e;
localStorage.setItem("employee", JSON.stringify(employeeList));
showdata();
document.getElementById("submit").style.display = "block";
document.getElementById("update").style.display = "none";
document.getElementById("uname").value = "";
document.getElementById("uemail").value = "";
}
}
</script>
</body>
</html>
Output
.png)
Make To Do APP with bellow Attribute.
Task Name ,date to be finished ,time , status ,and delete or update button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#update{
display: none;
}
#update_record{
display: none;
}
#status {
display: none;
}
#done {
display: none;
}
#Done{
background-color: green;
color: white;
}
#NotDone
{
background-color: red;
color: white;
}
</style>
</head>
<body>
<center>
<table>
<h1 id="add_record">Add Record</h1>
<h1 id="update_record">Update Record</h1>
<tr>
<td>Name :</td>
<td><input type="text" id="uname"></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="email" id="uemail"></td>
</tr>
<tr>
<td><label id="done">Done</label> </td>
<td><input type="checkbox" value="Done" id="status"></td>
</tr>
<tr>
<td align="center" colspan="2">
<br><button id="submit" onclick="adddata()">Submit</button>
<button id="update">Update</button>
</td>
</tr>
</table>
<h1>All data is </h1>
<table border="1" id="mytable">
</table>
</center>
<script>
// Insertion data in localstorage
function adddata() {
var unm = document.getElementById("uname").value;
var ueml = document.getElementById("uemail").value;
var status = "Not Done";
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
employeeList.push({
Name: unm,
Email: ueml,
Status: status
})
localStorage.setItem("employee", JSON.stringify(employeeList));
document.getElementById("uname").value = "";
document.getElementById("uemail").value = "";
document.onload(showdata());
}
document.onload(showdata());
// Retrive Data from localstorage
function showdata() {
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
var data = "";
data += "<tr>";
data += "<th> Name </th>";
data += "<th> Email </th>";
data += "<th> Status </th>";
data += "<th> Delete </th>";
data += "<th> Edit </th>";
data += "</tr>";
employeeList.forEach((element, index) => {
data += "<tr>";
data += "<td>";
data += element.Name;
data += "</td>";
data += "<td>";
data += element.Email;
data += "</td>";
data += "<td id='"+element.Status.replace(/\s/g, "")+"'>";
data += element.Status;
data += "</td>";
data += `<td><button onclick="deletedata(${index})">Delete</button></td>`;
data += `<td><button onclick="editdata(${index})">Edit</button></td>`;
data += "</tr>";
});
document.getElementById("mytable").innerHTML = data;
}
// Delete Data from localstorage
function deletedata(index) {
var employeeList;
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
employeeList.splice(index, 1);
localStorage.setItem("employee", JSON.stringify(employeeList));
showdata();
}
// update data from localstorage
function editdata(index) {
document.getElementById("submit").style.display = "none";
document.getElementById("add_record").style.display = "none";
document.getElementById("update_record").style.display = "block";
document.getElementById("update").style.display = "block";
document.getElementById("status").style.display = "block";
document.getElementById("done").style.display = "block";
var employeeList;
if (localStorage.getItem("employee") == null) {
var employeeList = [];
}
else {
employeeList = JSON.parse(localStorage.getItem("employee"));
}
document.getElementById("uname").value = employeeList[index].Name;
document.getElementById("uemail").value = employeeList[index].Email;
document.querySelector("#update").onclick = function () {
var n = document.getElementById("uname").value;
var e = document.getElementById("uemail").value;
var s = document.getElementById("status").checked;
var st = "";
if (s == true) {
console.log("Done");
st = "Done";
}
else {
console.log("Not Done");
st = "Not Done";
}
employeeList[index].Name = n;
employeeList[index].Email = e;
employeeList[index].Status = st;
localStorage.setItem("employee", JSON.stringify(employeeList));
showdata();
document.getElementById("submit").style.display = "block";
document.getElementById("update").style.display = "none";
document.getElementById("status").style.display = "none";
document.getElementById("done").style.display = "none";
document.getElementById("add_record").style.display = "block";
document.getElementById("update_record").style.display = "none";
document.getElementById("uname").value = "";
document.getElementById("uemail").value = "";
}
}
</script>
</body>
</html>
Output
.png)