jQuery JSON HTML5 Local Storage CRUD
This tutorial is based on the examples in http://mrbool.com/creating-a-crud-form-with-html5-local-storage-and-json/26719
The original codes have been modified so that: 1) User does not have to enter ID. It will be automatically generated by the application. 2) User is not allowed to delete the data. This is to simplify the ID integrity. |
1) Create index.html file
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head> <body> <form id="frmItem"> <ul> <li> <label for="txtID">ID:</label> <input type="text" id="txtID" readonly/> </li> <li> <label for="txtName">Name:</label> <input type="text" id="txtName"/> </li> <li> <label for="txtPhone">Phone:</label> <input type="text" id="txtPhone"/> </li> <li> <label for="txtEmail">Email:</label> <input type="text" id="txtEmail"/> </li> <li> <button value="Save" id="btnSave"/>Save</button> </li> </ul> </form> <table id="tblList"> </table> </body> <script type="text/javascript" src="functions.js"></script> </html> |
2) Create function.js file
$(function(){ var operation = "A"; //"A"=Adding; "E"=Editing var selected_index = -1; //Index of the selected list item var tbClients = localStorage.getItem("tbClients");//Retrieve the stored data tbClients = JSON.parse(tbClients); //Converts string to object if(tbClients == null) {tbClients = [];}//If there is no data, initialize an empty array $("#txtID").val(tbClients.length+1); function Add(){ var client = JSON.stringify({ ID :$("#txtID").val(), Name : $("#txtName").val(), Phone : $("#txtPhone").val(), Email : $("#txtEmail").val() }); tbClients.push(client); localStorage.setItem("tbClients", JSON.stringify(tbClients)); //alert("The data was saved."); return true; } function Edit(){ tbClients[selected_index] = JSON.stringify({ ID : $("#txtID").val(), Name : $("#txtName").val(), Phone : $("#txtPhone").val(), Email : $("#txtEmail").val() }); //Alter the selected item on the table localStorage.setItem("tbClients", JSON.stringify(tbClients)); alert("The data was edited."); operation = "A"; //Return to default value return true; } /* function Delete(){ tbClients.splice(selected_index, 1); localStorage.setItem("tbClients", JSON.stringify(tbClients)); alert("Client deleted."); } */
$(document).on( "submit", "#frmItem", function(){ if(operation == "A") return Add(); else return Edit(); }); $(document).on( "click", ".btnEdit", function(){ operation = "E"; selected_index = parseInt($(this).attr("alt").replace("Edit", "")); var cli = JSON.parse(tbClients[selected_index]); $("#txtID").val(cli.ID); $("#txtName").val(cli.Name); $("#txtPhone").val(cli.Phone); $("#txtEmail").val(cli.Email); $("#txtID").attr("readonly","readonly"); $("#txtName").focus(); }); $(document).on( "click", ".btnDelete", function(e){ selected_index = parseInt($(this).attr("alt").replace("Delete", "")); Delete(); List(); }); $(document).bind("onload",List());
function List(){ $("#tblList").html(""); $("#tblList").html( "<thead>"+ "<tr>"+ "<th></th>"+ "<th>ID</th>"+ "<th>Name</th>"+ "<th>Phone</th>"+ "<th>Email</th>"+ "</tr>"+ "</thead>"+ "<tbody>"+ "</tbody>" ); for(var i in tbClients){ var cli = JSON.parse(tbClients[i]); $("#tblList tbody").append("<tr>"+ "<td><img src='edit.jpg' alt='Edit"+i+"' class='btnEdit'/>"+ //"<img src='delete.jpg' alt='Delete"+i+"' class='btnDelete'/>"+ "</td>" + "<td>"+ cli.ID+"</td>"+"<td>"+ cli.Name+"</td>"+"<td>"+ cli.Phone+"</td>"+"<td>"+ cli.Email+"</td>"+"</tr>"); } } }); |
3) Save the button images
4) Run
4.1) Enter new data
