Welcome folks today in this blog post we will be building a crud app in browser using localstorage api. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form id="form"> <input type="text" id="username" required placeholder="Enter the username"> <input type="text" name="" id="country" required placeholder="Enter the country"> <button>Add</button> </form> <button id="clear">Clear Users</button> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody id="result"> </tbody> </table> |
As you can see in the above html code we have the html5 form in which we have two fields to enter the username and country of the user. And then we have the button to submit the form and add the data inside the localstorage and then we have the button to clear the localstorage. And lastly we have the table to display all the data.
Now we need to make the script.js file and copy paste the javascript code
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
let users = [] let form = document.getElementById('form') form.addEventListener('submit', (e) => { document.getElementById('result').innerHTML="" e.preventDefault() let username = document.getElementById('username').value let country = document.getElementById('country').value let user = { username: username, country: country } document.getElementById('username').value="" document.getElementById('country').value="" }) |
As you can see in the above code we have declared an empty array where we will be storing all the users. And then we are targeting the form using it’s id. And then we have attached the onsubmit event listener to the form. When the form submits then automatically the function will execute first of all we are getting the username and country values that the user has submitted and then we are creating the javascript object of user and then we are resetting the form values.
Now we need to insert the user object into the users array and then insert that array to the localstorage. This can be done as follows
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if (localStorage.getItem('users')) { users = localStorage.getItem('users') users = JSON.parse(users) users.push(user) localStorage.setItem('users', JSON.stringify(users)) displayUsers(users) } else { users.push(user) localStorage.setItem('users', JSON.stringify(users)) displayUsers(users) } |
As you can see first of all we are checking if existing users are there inside the localstorage then we will append the newly created user to that array of users. And in the else block if nothing is present inside localstorage then we will be inserting the newly created user object to the users array. And in both the scenarios we are using the setItem() method of localstorage api to insert the users array inside the localstorage and here also we are using JSON.stringify() method to convert the javascript object to json. And after that we are calling the displayUsers() method passing the users object.
Now we need to define the displayUsers() method which is shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function displayUsers(users){ users.forEach(user => { document.getElementById('result').innerHTML += ` <tr> <td>${user.username}</td> <td>${user.country}</td> </tr> ` }); } |
As you can see we are simply using the foreach loop to loop through all the users which are present inside the array. And then we are showing all the results inside the table. And we are printing the username and the country.
Retrieving Users From Localstorage
Now we will be retrieving the users from the localstorage by using a simple if condition as shown below
|
1 2 3 4 |
if (localStorage.getItem('users')) { let users = localStorage.getItem('users') displayUsers(JSON.parse(users)) } |
Now we are using the json.parse() method to convert the json to javascript object. And here we are using the getItem() of localstorage api to get the users item from the localstorage.
Deleting Users From Localstorage
Now guys lastly we will be attaching the onclick event listener to the clear button and inside this we will be calling the clear() method which will delete all the data from the localstorage.
|
1 2 3 4 |
document.getElementById('clear').addEventListener('click',() => { localStorage.clear() document.getElementById("result").innerHTML = "" }) |
FULL SOURCE CODE
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Localstorage CRUD in Javascript</title> </head> <body> <form id="form"> <input type="text" id="username" required placeholder="Enter the username"> <input type="text" name="" id="country" required placeholder="Enter the country"> <button>Add</button> </form> <button id="clear">Clear Users</button> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody id="result"> </tbody> </table> </body> <script> let users = [] let form = document.getElementById('form') function displayUsers(users){ users.forEach(user => { document.getElementById('result').innerHTML += ` <tr> <td>${user.username}</td> <td>${user.country}</td> </tr> ` }); } if (localStorage.getItem('users')) { let users = localStorage.getItem('users') displayUsers(JSON.parse(users)) } form.addEventListener('submit', (e) => { document.getElementById('result').innerHTML="" e.preventDefault() let username = document.getElementById('username').value let country = document.getElementById('country').value let user = { username: username, country: country } document.getElementById('username').value="" document.getElementById('country').value="" if (localStorage.getItem('users')) { users = localStorage.getItem('users') users = JSON.parse(users) users.push(user) localStorage.setItem('users', JSON.stringify(users)) displayUsers(users) } else { users.push(user) localStorage.setItem('users', JSON.stringify(users)) displayUsers(users) } }) document.getElementById('clear').addEventListener('click',() => { localStorage.clear() document.getElementById("result").innerHTML = "" }) </script> </html> |
