Hello everyone, back at porkaone. On this occasion we will learn how to
create a simple CRUD application using localStorage in the chrome browser.
Curious?, let's follow in full below.
Previously, I have written an article about the discussion of localStorage at the following link https://www.porkaone.com/2022/07/understanding-localstorage-how-to-use.html, in the article discussed the meaning, function, limitations and how to use it. But I'm sure there are still many who are confused about how to implement it in the form of a CRUD application.
One reason may be that the data manipulation mechanism in localStorage is different from that of other DBMSs such as MySQL or MongoDB. Moreover, localStorage only has 5 commands and does not have commands such as update. Another reason may be because many of us are not familiar with the javascript language.
LocalStorage is very suitable for use by front-end programmers who want to learn programming without having to understand servers, back-end, and databases. You can use this to create a notes application, contacts application, or web configuration.
Creating Web CRUD Javascript with LocalStorage Without Backend and Database Setup
Ok, on this occasion we will create a simple contact application, there is a form on the left and a contact list table on the right. We only use one form that serves to add or edit data. To see the final result, you can directly scroll to the bottom of this article.1. Ikuti scriptnya di bawah ini. Create a new folder with the name crud_local_storage. Then create a new file with the name index.html. Follow the script below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-lg-12">
<h1 class="alert alert-primary text-center">
CRUD Practice With Javascript and Localstorage
</h1>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<form id="form">
<input type="hidden" name="id" id="id">
<label for="">Name</label>
<input type="text" placeholder="Name" class="form-control" name="name" id="name" required>
<br>
<label for="">Age</label>
<input type="number" placeholder="Age" class="form-control" name="age" id="age" required>
<br>
<label for="">Address</label>
<textarea name="address" placeholder="Address" id="address" cols="30" rows="5" required class="form-control"></textarea>
<br>
<label for="">Phone</label>
<input type="text" placeholder="Phone" class="form-control" id="phone" name="phone" required>
<br>
<button class="btn btn-sm btn-primary" type="button" onclick="save()">Save</button>
<button class="btn btn-sm btn-primary" type="button" onclick="clearData()">Reset</button>
</form>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="datatable" class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Phone</th>
<th>Edit</th>
<th>Hapus</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="all_data.js"></script>
<script src="save.js"></script>
<script src="find.js"></script>
<script src="remove.js"></script>
<script>
allData()
</script>
<script>
function clearData(){
document.getElementById('form').reset()
document.getElementById('id').value = ""
}
</script>
</body>
</html>
2. Create a new file with the name all_data.js. This file serves
to retrieve data from localStorage and display it to a table. Follow the
script below
3. Create a new file with the name save.js. This file serves to store new data or update existing data. Follow the script below.
We have gone through all the steps, if there are problems, try to copy and paste the script above. Now it's time for us to do the test. Please run and if successful then the result looks like below.
//method to get all data
function allData(){
table.innerHTML = ``
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
//looping data and show data in table
contactList.forEach(function (value, i){
var table = document.getElementById('table')
table.innerHTML += `
<tr>
<td>${i+1}</td>
<td>${value.name}</td>
<td>${value.age}</td>
<td>${value.address}</td>
<td>${value.phone}</td>
<td>
<button class="btn btn-sm btn-success" onclick="find(${value.id})">
<i class="fa fa-edit"></i>
</button>
</td>
<td>
<button class="btn btn-sm btn-danger" onclick="removeData(${value.id})">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>`
})
}
3. Create a new file with the name save.js. This file serves to store new data or update existing data. Follow the script below.
//method to save data into localstorage
function save(){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
//get last array to get last id
//and store it into variable id
var id
contactList.length != 0 ? contactList.findLast((item) => id = item.id) : id = 0
if(document.getElementById('id').value){
//edit contactlist array based on value
contactList.forEach(value => {
if(document.getElementById('id').value == value.id){
value.name = document.getElementById('name').value,
value.age = document.getElementById('age').value,
value.address = document.getElementById('address').value,
value.phone = document.getElementById('phone').value
}
});
//remove hidden input
document.getElementById('id').value = ''
}else{
//save
//get data from form
var item = {
id : id + 1,
name : document.getElementById('name').value,
age : document.getElementById('age').value,
address : document.getElementById('address').value,
phone : document.getElementById('phone').value
}
//add item data to array contactlist
contactList.push(item)
}
// save array into localstorage
localStorage.setItem('listItem', JSON.stringify(contactList))
//update table list
allData()
//remove form data
document.getElementById('form').reset()
}
4. Create a new file named find.js. This file serves to
retrieve data from localStorage according to the selected id, then the data
will be displayed on the form. Follow the script below.
5. Create a new file with the name remove.js. This file serves to delete the array data and then save it back to localStorage. Follow the script below.
//method to get detail personal data based on id
function find(id){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
contactList.forEach(function (value){
if(value.id == id){
document.getElementById('id').value = value.id
document.getElementById('name').value = value.name
document.getElementById('age').value = value.age
document.getElementById('address').value = value.address
document.getElementById('phone').value = value.phone
}
})
}
5. Create a new file with the name remove.js. This file serves to delete the array data and then save it back to localStorage. Follow the script below.
function removeData(id){
//get data from localstorage and store to contaclist array
//we must to use JSON.parse, because data as string, we need convert to array
contactList = JSON.parse(localStorage.getItem('listItem')) ?? []
contactList = contactList.filter(function(value){
return value.id != id;
});
// save array into localstorage
localStorage.setItem('listItem', JSON.stringify(contactList))
//get data again
allData()
}
We have gone through all the steps, if there are problems, try to copy and paste the script above. Now it's time for us to do the test. Please run and if successful then the result looks like below.
|
| Final Result |
Well, now you can use localStorage to store data locally. You can
improvise by making other applications such as the note app, or todolist,
or other applications that are not so heavy but very productive for you.
So this tutorial is about how to Create Web CRUD Javascript with
localStorage without backend and database setup. Hopefully useful, if you
have any questions please ask in the comments column below. That is all
and thank you.
0 Comments
Come on ask us and let's discuss together
Emoji