Save the data in Local storage using jQuery-CodePudding

I create a table with CRUD operations in jQuery. All CRUD operations worked, no issues on it. I need to save the data in local storage. But I don't know the code for how to save the data in local storage. Please help me to code for save the data in local storage. Below, my code for create table with CRUD operations in jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CRUD Table jQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <div >
        <div > 
            <div >
                <input type="button" id="btnAdd"  value="Add New" />
            </div>
        </div>
        <div >
            <div >
                <table id="tblData" >
                    <thead>
                        <tr> 
                            <th>ID</th>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Age</th>
                            <th >Action</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var emptyRow = "<tr><td colspan='4' class='text-center'></td></tr>";
        var emptyNewRow = "<tr class='trNewRow'>"; 
        emptyNewRow = emptyNewRow   "    <td class='tdID'>";
        emptyNewRow = emptyNewRow   "        <input type='text' class='form-control txtID' />";
        emptyNewRow = emptyNewRow   "    </td>";
        emptyNewRow = emptyNewRow   "    <td class='tdName'>";
        emptyNewRow = emptyNewRow   "        <input type='text' class='form-control txtName' />";
        emptyNewRow = emptyNewRow   "    </td>";
        emptyNewRow = emptyNewRow   "    <td class='tdAddress'>";
        emptyNewRow = emptyNewRow   "        <input type='text' class='form-control txtAddress' />";
        emptyNewRow = emptyNewRow   "    </td>";
        emptyNewRow = emptyNewRow   "    <td class='tdAge'>";
        emptyNewRow = emptyNewRow   "        <input type='text' class='form-control txtAge' />";
        emptyNewRow = emptyNewRow   "    </td>";
        emptyNewRow = emptyNewRow   "    <td class='tdAction'>";
        emptyNewRow = emptyNewRow   "        <button class='btn btn-sm btn-success btn-save'> Save</button>";
        emptyNewRow = emptyNewRow   "        <button class='btn btn-sm btn-success btn-cancel'> Delete</button>";
        emptyNewRow = emptyNewRow   "    </td>";
        emptyNewRow = emptyNewRow   "</tr>";

        var rowButtons ="<button class='btn btn-success btn-sm btn-edit' > Edit </button>  <button class='btn btn-danger btn-sm' > Delete </button>";
        var rowUpdateButtons ="<button class='btn btn-success btn-sm btn-save' > Update </button>  <button class='btn btn-danger btn-sm btn-save' > Delete </button> ";

        $(document).ready(function () {
            //debugger;
            $("#tblData tbody").append(emptyRow); // adding empty row on page load 
            
            $("#btnAdd").click(function () { 
                //debugger;
                if ($("#tblData tbody").children().children().length == 1) {
                    $("#tblData tbody").html("");
                }
                //debugger;
                $("#tblData tbody").append(emptyNewRow); // appending dynamic string to table tbody
            });
            
            $('#tblData').on('click', '.btn-save', function () {
                const id =  $(this).parent().parent().find(".txtID").val();
                $(this).parent().parent().find(".tdID").html("" id "");
                const name =  $(this).parent().parent().find(".txtName").val();
                $(this).parent().parent().find(".tdName").html("" name ""); 
                const address =  $(this).parent().parent().find(".txtAddress").val();
                $(this).parent().parent().find(".tdAddress").html("" address "");
                const age =  $(this).parent().parent().find(".txtAge").val();
                $(this).parent().parent().find(".tdAge").html("" age "");
                $(this).parent().parent().find(".tdAction").html(rowButtons);
            });
             
            
            $('#tblData').on('click', '.btn-danger', function () { // registering function for delete button  
                $(this).parent().parent().remove();
                if ($("#tblData tbody").children().children().length == 0) {
                    $("#tblData tbody").append(emptyRow);
                }
            });
            

            $('#tblData').on('click', '.btn-cancel', function () { 
                $(this).parent().parent().remove();
            });


            $('#tblData').on('click', '.btn-edit', function () { 

                const id =$(this).parent().parent().find(".tdID").html();
                $(this).parent().parent().find(".tdID").html("<input type='text' value='" id "' class='form-control txtID' />"); 

                const name =$(this).parent().parent().find(".tdName").html();
                $(this).parent().parent().find(".tdName").html("<input type='text' value='" name "' class='form-control txtName' />"); 

                const address =$(this).parent().parent().find(".tdAddress").html();
                $(this).parent().parent().find(".tdAddress").html("<input type='text' value='" address "' class='form-control txtAddress' />"); 

                const age =$(this).parent().parent().find(".tdAge").html();
                $(this).parent().parent().find(".tdAge").html("<input type='text' value='" age "' class='form-control txtAge' />"); 

                $(this).parent().parent().find(".tdAction").html(rowUpdateButtons);
                               
            });

        });
    </script> 
</body> 
</html>

CodePudding user response：

add this

localStorage.setItem('x', y);

x = name of whatver you want the local storage var to be y = the value of what you want to save

for example:

const id = $(this).parent().parent().find(".txtID").val();

you would save it in local storage as

localStorage.setItem('txtId', id);

now to call it or to see the value later on you simply just put

localStorage.getItem('txtId');