LocalStorage is a data storage type that allows JavaScript sites and applications to store and access the data without any expiration date i.e we can access data anytime from the client browser, data will always be persisted and will not expire and you can access the data from the storage.
So using LocalStorage, data stored in the client browser will be available after closing the browser window, we can say that the localStorage store the data with no expiry date, and this is the advantage of LocalStorage over cookies in the browser, and available to the user even after closing the web browser. It is helpful in many ways, for example, storing the user login detail on any website.
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": "jagadisha_mrs_menon@raynor.co",
"gender": "male",
"status": "inactive"
},
{
"id": 4036,
"name": "Kannan Panicker II",
"email": "panicker_kannan_ii@powlowski-trantow.name",
"gender": "male",
"status": "inactive"
},
{
"id": 4035,
"name": "Amrit Gandhi",
"email": "gandhi_amrit@west.com",
"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.
The post How to leave just points without lines in ChartJS appeared first on Software Development | Programming Tutorials.
Read More Articles
- [Simple Way]-JavaScript Edit table row Using Popup
- Crud operation in JavaScript using local storage | Crud operation using local storage with es6
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- Fetch and display data from API in React JS using Axios
- CRUD operation in React JS using Hooks
- Crud operations in React Js with Axios and Rest API
- How to edit/delete selected row from HTML table using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- React Js- Fetch data from API using hooks
- [Simple Way]-How to create common helper class in React JS? | Fetch data from API using helper class and functions
- Simple React.js CRUD Example With Rest API
- [Simple Trick]-How to Combined Bar and line charts Using Chart.js?
- How to Create a Stacked Bar Chart Using Chart Js Example?
- [Simple Trick]-How to display Grouped Bar Chart Using Chart Js?
- [Simple Trick]-Create a Multi Line Chart Using Chart.js
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- Convert JSON data to HTML table using JavaScript
- Find object by id in an array of JavaScript objects
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- Replace image in word document using C#
- [Best Way]-How to display JSON data in HTML using Ajax
- Simple Way Find and replace text in Word document using C#
- Display JSON data in HTML table using JavaScript dynamically
- Add edit and delete data in an HTML table using JavaScript
- How To Post File and Data to API using HttpClient C#
- How send an HTTP POST request to a server from Excel using VBA?
- .NET Core Web API Using Code First Entity Framework Approach
- Create Asp.Net Core Web Api Using Entity Framework Database First
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- CRUD operation using partial view in MVC with modal popup
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- Crud Operations in MVC Without Entity Framework
- React Js-Insert Update Display Delete CRUD Operations
- Create Login,Signout and Registration in Asp .Net Mvc Using Entity
- Export Gridview to Excel and Csv in Asp .Net With Formatting Using c#
- [Solved]-How to Upload pdf file using jquery MVC?
- [Solved]-Uploading both data and files in FormData using Ajax MVC
- [Solved]-How to format Date Object in MM/DD/YYYY HH:MM:SS format using JavaScript ?
- [Solved]-Difference between two dates in minutes Javascript
