LocalStorage is a type of data storage that enables JavaScript websites and applications to store and retrieve data without an expiration date. This means that data stored in LocalStorage remains available to the client browser indefinitely, even after the browser window is closed. Unlike cookies, LocalStorage stores data with no expiry date, ensuring persistent accessibility to users. This feature is advantageous, as it allows for the retention of user login details and other essential information on websites, providing convenience and enhancing user experience.
Crud operation in JavaScript using local storage
Previously, cookies were the only option to store this type of temporary and user information, but now we can also use localStorage. One more advantage of LocalStorage is that it has a higher storage limit (5MB ) compare to cookies(4MB). and LocalStorage also does not get sent with every HTTP
localStorage Functions
<script type="text/javascript">
function setLocalStorage() {
var users = [
{
"id": 4037,
"name": "Mrs. Jagadisha Menon",
"email": "[email protected]",
"gender": "male",
"status": "inactive"
},
{
"id": 4036,
"name": "Kannan Panicker II",
"email": "[email protected]",
"gender": "male",
"status": "inactive"
},
{
"id": 4035,
"name": "Amrit Gandhi",
"email": "[email protected]",
"gender": "male",
"status": "inactive"
}
]
//setItem method is used to save the data through key and value to localStorage.
localStorage.setItem('userData', JSON.stringify(users));
}
function getLocalStorage() {
var users = JSON.parse(localStorage.getItem('userData'));
return users;
}
function removeItemInLocalStorage() {
//removeItem method is used to remove the data through key from localStorage.
localStorage.removeItem('userData');
}
function ClearInLocalStorage() {
//clear method is used to clear localStorage.
localStorage.clear();
}
</script>In this example, We are going to create a basic page where Users can see all the lists of records in a Table from localstorage with add button for adding new records in the table and localstorage , edit button for updating existing records, and a delete button to delete any existing records from localstorage data and table. and we will show discuess crud operation using local storage with es6.
<!DOCTYPE html>
<html>
<head>
<title>CRUD operations using JSON and local storage in JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="container">
<h1>Crud operation in javascript using local storage</h1>
<br />
<fieldset>
<legend>
Users List
</legend>
<table class="table">
<thead>
<tr>
<th>userId</th>
<th>name</th>
<th>email</th>
<th>gender</th>
<th>status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tblbody">
</tbody>
</table>
</fieldset>
</div>
</body>
</html>
<script type="text/javascript">
bindUserData();
function addUserDataToLocalStorage(userObj) {
//already has data in localstorage then update it other create new one
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
users.push(userObj);
localStorage.setItem('userData', JSON.stringify(users));
}
else {
var userData = new Array();
userData.push(userObj);
localStorage.setItem('userData', JSON.stringify(userData));
}
}
function updateDataToLocalStorage(userObj) {
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
var user = users.filter((x) => x.id == userObj.id).pop();
if (user != null) {
user.name = userObj.name;
user.email = userObj.email;
user.gender = userObj.gender;
user.status = userObj.status;
}
localStorage.setItem('userData', JSON.stringify(users));
}
}
function deletedataFromLocalStorage(UserId) {
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
users.splice(users.findIndex(a => a.id === UserId), 1)
localStorage.setItem('userData', JSON.stringify(users));
}
}
function bindUserData() {
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
document.getElementById('tblbody').innerHTML = "";
users.forEach(function (item, index) {
debugger;
var btnEditId = "btnedit" + item.id;
var btnDeleteId = "btndelete" + item.id;
var tableRow = "<tr Id='" + item.id + "' data-CustomerID='" + item.id + "' data-name='" + item.name + "' data-email='" + item.email + "' data-gender='" + item.gender + "' data-status='" + item.status + "'>"
+ "<td class='td-data'>" + item.id + "</td>"
+ "<td class='td-data'>" + item.name + "</td>"
+ "<td class='td-data'>" + item.email + "</td>"
+ "<td class='td-data'>" + item.gender + "</td>"
+ "<td class='td-data'>" + item.status + "</td>"
+ "<td class='td-data'>" +
"<button id='" + btnEditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + item.id + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
"<button id='" + btnDeleteId + "' class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow(" + item.id + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
+ "</td>"
+ "</tr>";
document.getElementById('tblbody').innerHTML += tableRow;
})
}
var AddRow = "<tr>"
+ "<td class='td-data'></td>"
+ "<td class='td-data'><input type='text' id='txtname' placeholder='name..'></td>"
+ "<td class='td-data'><input type='email' id='txtemail' placeholder='email..'></td>"
+ "<td class='td-data'><select id='ddlgender'><option value='male'>male</option><option value='female'>female</option></select></td>"
+ "<td class='td-data'><select id='ddlstatus'><option value='active'>active</option><option value='inactive'>inactive</option></select></td>"
+ "<td class='td-data'>" + "<button id= 'btnaddCustomer' onclick='addUser()' class='btn btn-success'> <i class='fa fa-plus-circle' aria-hidden='true'></i>Add</button>" + "</td>"
+ "</tr>";
document.getElementById('tblbody').innerHTML += AddRow;
}
function GetUserID() {
const ID = Date.now();
return ID;
}
function addUser() {
var userId = GetUserID();
var txtname = document.getElementById("txtname").value;
if (!txtname) {
alert('Please enter name!')
return false;
}
var email = document.getElementById("txtemail").value;
if (!email) {
alert('Please enter email!')
return false;
}
var emailfilter = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!emailfilter.test(email)) {
alert('Please enter a valid email address!');
return false;
}
var gender = document.getElementById("ddlgender").value;
var status = document.getElementById("ddlstatus").value;
var userObj = {
"id": userId,
"name": txtname,
"email": email,
"gender": gender,
"status": status
};
addUserDataToLocalStorage(userObj);
document.getElementById('txtname').value = "";
document.getElementById('txtemail').value = "";
bindUserData();
};
function showEditRow(UserID) {
var userRow = document.getElementById(UserID); //this gives tr of whose button was clicked
var trdata = userRow.querySelectorAll(".td-data");
/*returns array of all elements with
"row-data" class within the row with given id*/
var userID = trdata[0].innerHTML;
var userName = trdata[1].innerHTML;
var useremail = trdata[2].innerHTML;
var userGender = trdata[3].innerHTML;
var userStatus = trdata[4].innerHTML;
trdata[0].innerHTML = '<input name="txtuserid" disabled id="txtuserid" value="' + userID + '"/>';
trdata[1].innerHTML = '<input name="txtname" id="txtname" value="' + userName + '"/>';
trdata[2].innerHTML = '<input name="txtemail" id="txtemail" value="' + useremail + '"/>';
if (userGender == 'male') {
trdata[3].innerHTML = '<select id="ddlgender"><option value="male">male</option><option value="female">female</option></select>';
}
else {
trdata[3].innerHTML = '<select id="ddlgender"><option value="female">female</option><option value="male">male</option></select>';
}
if (userStatus == 'active') {
trdata[4].innerHTML = '<select id="ddlstatus"><option value="active">active</option><option value="inactive">inactive</option></select>';
}
else {
trdata[4].innerHTML = '<select id="ddlstatus"><option value="inactive">inactive</option><option value="active">active</option></select>';
}
trdata[5].innerHTML =
"<button class='btn btn-primary btn-xs btn-updateCustomer' onclick='updateUser(" + userID + ")'>" +
"<i class='fa fa-pencil' aria-hidden='true'></i>Update</button>"
+ "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancel(" + userID + ")'><i class='fa fa-times' aria-hidden='true'></i>Cancel</button>"
+ "<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteUser(" + userID + ")'>"
+ "<i class='fa fa-trash' aria-hidden='true'></i>Delete</button>"
}
function cancel(UserID) {
debugger;
var btneditId = "btnedit" + UserID;
var btndeleteId = "btndelete" + UserID;
var CustomerRow = document.getElementById(UserID); //this gives tr of whose button was clicked
var data = CustomerRow.querySelectorAll(".td-data");
var name = CustomerRow.getAttribute("data-name");
var email = CustomerRow.getAttribute("data-email");
var gender = CustomerRow.getAttribute("data-gender");
var status = CustomerRow.getAttribute("data-status");
data[0].innerHTML = UserID;
data[1].innerHTML = name;
data[2].innerHTML = email;
data[3].innerHTML = gender;
data[4].innerHTML = status;
var actionbtn = "<button id='" + btneditId + "' class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow(" + UserID + ")'><i class='fa fa-pencil' aria-hidden='true'></i>Edit</button>" +
"<button id='" + btndeleteId + "' class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow(" + UserID + ")'><i class='fa fa-trash' aria-hidden='true'>Delete</button>"
data[5].innerHTML = actionbtn;
}
function updateUser(UserID) {
var userRow = document.getElementById(UserID); //this gives tr of whose button was clicked
var data = userRow.querySelectorAll(".td-data");
var name = data[1].querySelector("#txtname").value;
var email = data[2].querySelector("#txtemail").value;
var gender = data[3].querySelector("#ddlgender").value;
var status = data[4].querySelector("#ddlstatus").value;
var userObj = {
"id": UserID,
"name": name,
"email": email,
"gender": gender,
"status": status
};
updateDataToLocalStorage(userObj);
bindUserData();
}
function deleteRow(UserID) {
deletedataFromLocalStorage(UserID);
bindUserData();
}
</script>
Crud operation using local storage with es6
If you are looking for ES6 syntax and then I have written syntax for ES6, you can reference from below code.
<script type="text/javascript">
const addUserDataToLocalStorage = (userObj) => {
//already has data in localstorage then update it other create new one
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
users.push(userObj);
localStorage.setItem('userData', JSON.stringify(users));
}
else {
var userData = new Array();
userData.push(userObj);
localStorage.setItem('userData', JSON.stringify(userData));
}
}
const updateDataToLocalStorage = (userObj) => {
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
var user = users.filter((x) => x.id == userObj.id).pop();
if (user != null) {
user.name = userObj.name;
user.email = userObj.email;
user.gender = userObj.gender;
user.status = userObj.status;
}
localStorage.setItem('userData', JSON.stringify(users));
}
}
const deletedataFromLocalStorage = (UserId) => {
var users = JSON.parse(localStorage.getItem('userData'));
if (users != null) {
users.splice(users.findIndex(a => a.id === UserId), 1)
localStorage.setItem('userData', JSON.stringify(users));
}
}
</script>
Read more article
- [Simple Way]-JavaScript Edit table row Using Popup
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- How to edit/delete selected row from HTML table using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- [Simple Trick]-Hide Points in ChartJS Line Graph
- [Simple Trick]-How to Hide Some Points in ChartJS
- How to leave just points without lines in ChartJS
In this way, it is a superior decision now for client-side capacity. A few fundamental marks of localStorage should be noted:localStorage isn’t get to store touchy information and can be gotten to utilizing any code. Along these lines, it is very unreliable.
It is a benefit of localStorage over treats that it can store a larger number of information than treats. You can store 5MB of information on the program utilizing localStorage.
localStorage stores the data just on program rather in information base. In this way the localStorage is certainly not a substitute for a server-based data set.
localStorage is coordinated, and that implies that every activity executes consistently.