Save ajax post data on div to localStorage

Question

I created a datatable in which there is a button which has an action to post data into a div, below is the code I have:

html :

 <div class="card-body">
    <div class="overlay" id="kt_datatable_nodata">
       <div class="overlay-wrapper rounded bg-light text-center pt-lg-30 pb-lg-30"
                                    style="border: 2px dashed #c6c6c6;">
        <p class="font-weight-bold text-center">Pilih data untuk dibandingkan.</p>
          <a href='#left-modal' class='btn font-weight-bolder btn-jcm btn-md'
                                        data-toggle='modal'>Pilih Data</a>
        </div>
     </div>
                        
   
    <div id="kt_datatable_fetch_display"></div> 
               
     </div>

This my datatable :

   "use strict";
var LeftTable = function() {
var options = {
   
        data: {
            type: 'remote',
            source: {
                read: {
                    url: 'src/khu-pusat/json/compare.php',
                },
            },
        },
       
        columns: [{
            field: 'name',
            title: 'Name',
            template: function(row) {
                return row.nama_karyawan;
            },
        },{
            field: 'proyek',
            title: 'Proyek',
            template: function(row) {
                return row.proyek;
            },
        },{
            field: 'action',
            title: 'Action',
            template: function(row) {
                return '<button data-id="'+ row.id +'" class="btn btn-sm btn-jcm" type="button" data-dismiss="modal">Pilih</button>';
            },
        },]
    };
 var displayLeftData = function() {

        $('#kt_datatable').on('click','tr button', function() {
           var leftId = $(this).data('id');
            $.ajax({
            type: 'post',
            url: 'src/khu-pusat/compare/left-side/left-value.php',
            data: {
                'rowid': leftId
            },
            success: function(data) {
            $('#kt_datatable_nodata').addClass('hidden'); 
            $("#kt_datatable_fetch_display").html(data);
            }
        });
    }).click(function() {
            $('#kt_datatable_fetch_display').empty();
    });
     };
    return {
        // public functions
        init: function() {
            displayLeftData();
        },
    };
}();

jQuery(document).ready(function() {
    LeftTable.init();
});

left-value.php

  <?php
    
    include 'db_connect.php';
    if (isset($_POST['rowid'])) {
        $id = $_POST['rowid'];
        $query = mysqli_query($config, "SELECT* FROM data_penilaian where id = '$id'");
        $no = 1;
        while ($row = mysqli_fetch_array($query)) {
    
    ?>
    <div class="text-right">
        <button type="submit" id="approve" class="btn btn-success btn-sm font-weight-bold"><i
                class="flaticon2-paperplane"></i>Approve</button>
        <a href='#left-modal' class='btn btn-light-success btn-sm font-weight-bold' data-toggle='modal'>Change more data</a>
    </div>
 <form class="leftForms" method="POST">
   <h3 class="card-label">
    <input type="hidden" name="id" class="form-control" value="<?= $row['id']; ?>">
    <span class="d-block text-dark font-weight-bolder mb-5">
                            <i class="fa fa-genderless text-jcm mr-2"></i>
                            <?= $row['name']; ?>
                        </span>
        <span class="d-block text-muted mt-1 font-size-sm ml-6">Proyek : <?= $row['proyek']; ?></span>                
    </h3>
</form>
<?php
}
   } 
?>

from the above case how can I save the data in kt_datatable_fetch_display into localStorage, in short, make kt_datatable_fetch_display into localStorage so that the div doesn't disappear when the page is reloaded.

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Mar 04 '22 at 10:46

score 0 · Answer 1 · answered Mar 04 '22 at 09:24

You can use this code.

var displayLeftData = function() {
    const content = localStorage.getItem('content');
    if(content) {
        $("#kt_datatable_fetch_display").html(content);
    }
        $('#kt_datatable').on('click','tr button', function() {
           var leftId = $(this).data('id');
            $.ajax({
            type: 'post',
            url: 'src/khu-pusat/compare/left-side/left-value.php',
            data: {
                'rowid': leftId
            },
            success: function(data) {
                $('#kt_datatable_nodata').addClass('hidden'); 
                $("#kt_datatable_fetch_display").html(data);
                localStorage.setItem('content', data);
            }
        });
    }).click(function() {
        $('#kt_datatable_fetch_display').empty();
        localStorage.removeItem('content');
    });
};

Save ajax post data on div to localStorage

1 Answers1