Local Storage menggunakan Java Script

By | January 9, 2023
Print Friendly, PDF & Email
79 Views

Beberapa aplikasi berbasis web biasanya menggunakan session seperti cookies untuk menyimpan data akan tetapi session tersebut bersifat temporary demi keamanan. Lain halnya ingin menyimpan data secara permanen walaupun aplikasi browser dimatikan. Solusinya menggunakan Local Storage.

Local Storage dapat menyimpan data sampai maksimal 5 MB, biasanya bisa kita gunakan untuk menyimpan pengaturan aplikasi daripada menggunakan database di sisi server. Tipe data yang bisa disimpan berupa string oleh sebab itu bila kalian ingin menyimpan data JSON harus diubah terlebih dahulu menggunakan JSON.stringify(data)

Pada pembahasan sebelumnya kita menggunakan teknik kompresi GZIP untuk mengecilkan ukuran JSON pada API https://softscients.com/stocks/index.php/yahoo/getStock yang semula mempunyai ukuran 9MB menjadi ukuran 1 MB.

Mari kita coba menggunakan API https://softscients.com/stocks/index.php/yahoo/getStock2 yang lebih singkat dengan mengurangi header seperti

  1. Date disingkat menjadi d,
  2. Low disingkat dengan l,
  3. Open disingkat dengan o, dan seterusnya

Sehingga ukurannya jadi lebih kecil lagi menjadi hanya 6.26 MB dan dikompres GZIP dengan ukuran 962 KB.

Local Storage

Local Storage dapat kita gunakan untuk menyimpan data tersebut sehingga tidak perlu dilakukan request AJAX ke server. User bisa lakukan request AJAX ke server sesuai kebutuhan, misalkan untuk update data terbaru. Penggunaan local Storage cukup mudah kok seperti dictionary yang mempunyai pasangan pair. Misalkan kita akan menyimpan key=”key1” berikut ini

window.localStorage.setItem("key1","ini content");

sedangkan untuk mengambil nya cukup gunakan perintah

window.localStorage.getItem("key1")

local Storage tidak mempunyai feature untuk update sehingga untuk resetnya harus menggunakan perintah setItem()

Menampilkan Local Storage pada Firefox

Seperti yang sudah dijelaskan sebelumnya bahwa local storage bersifat permanen sehingga ketika browser di close akan tetap tersimpan. Kalian bisa kok melihat isi nya dengan cara berikut

See also  Mengolah data JSON menggunakan Tidy JavaScript

Seperti halnya cookies yang akan disimpan berdasarkan domain url sehingga tidak akan tertukar jika kita akses untuk URL/Domain yang lainnya. Hampir semua browser mempunyai feature local storage bahkan untuk versi mobile pun juga ada jadi tidak usah kuatir untuk menggunakan local storage.

Demo Local Storage

Yuk kita akan coba untuk menambahkan fitur local storage pada bab sebelumnya dengan menambahkan pengecekan local storage serta mengubah API terbaru agar lebih efisien.  Seperti biasanya kita sisipkan library yang kita butuhkan

  <!-- sisipkan jquery -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <!-- Menyisipkan table
     https://bootstrap-table.com
   -->
  <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
  <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">

  <!-- Menyisipkan Bootstrap -->
  <link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />

  <!-- tidy -->
  <script src="https://d3js.org/d3-array.v2.min.js"></script>
  <script src="https://www.unpkg.com/@tidyjs/tidy/dist/umd/tidy.min.js"></script>
  <!-- pengaturan tidy -->
  <script>
    const { tidy, fill,mutate,rename, arrange, desc ,view,filter,debug,distinct,select,leftJoin,innerJoin,rightJoin} = Tidy;
  </script>

Kemudian sedikit menambahkan componen button untuk loading request AJAX secara manual.

<body>
   <h3>Harga Saham</h3>
   <button class="btn btn-primary mb-3" id="btn" type="button">OK</button>
   <table  id="table1"   data-toggle="table"  data-height="460" data-toolbar=".toolbar" data-sortable="true">							
        <thead>
         <tr>
           <th data-field="date">Date</th>
           <th data-field="stockcode">Stock Code</th>
           <th data-field="open">Open</th>
           <th data-field="high">High</th>
           <th data-field="low">Low</th>
           <th data-field="close">Close</th>
           <th data-field="volume" data-sortable="false" data-align="right">Volume</th>
         </tr>
        </thead>
      </table>	

</body>

Kita akan sedikit modifikasi dengan membuat function AJAX. Perhatian function berikut

//fungsi untuk AJAX 
function loadingdata(){
   let url = 'https://softscients.com/stocks/index.php/yahoo/getStock2';
   $.getJSON(url,function (response) {
      //jadikan array saja
      let ohc = response.map(function (data, index, array) {
                           let date = data.d;
                           let stockcode = data.s;
                           let open = data.o;
                           let high = data.h;
                           let low = data.l;
                           let close = data.c;
                           let volume = data.v;						
                           return [date,stockcode,open,high,low,close,volume];
                        });


      //untuk simpan data ke local storage
      window.localStorage.setItem("data",JSON.stringify(ohc));

      dataframe = tidy(ohc, rename({ 0:'date', 
                           1 :'stockcode',
                           2:'open',
                           3:'high',
                           4:'low',
                           5:'close',
                           6:'volume'}));


      $('#table1').bootstrapTable("destroy");
      $('#table1').bootstrapTable({
               data: dataframe,
               sortStable: true,
               pagination : true,
               search : true
               
      });
      let code = tidy(dataframe, distinct(['stockcode']),select(['stockcode']));
      alert("Jumlah emiten yaitu : "+code.length);

   });
};

Pada perintah window.localStorage.setItem("data",JSON.stringify(ohc));. berfungsi untuk menyimpan data ke local storage. Pada saat startup maka akan dilakukan pengecekan, apakah ada local storage? kalau ada lakukan pengambilan jika tidak ada maka lakukan loading

//pengecekan ada tidak local storage??
if(window.localStorage.getItem("data")==null){
   alert("tidak ada local storage, lakukan request AJAX");
   //artinya tidak ada local storage
   //sehingga butuh request AJAX dengan memanggil function loadingdata
   loadingdata();


}else{
   let json  = window.localStorage.getItem("data");
   let ohc = jQuery.parseJSON(json);
   dataframe = tidy(ohc, rename({ 0:'date', 
                        1 :'stockcode',
                        2:'open',
                        3:'high',
                        4:'low',
                        5:'close',
                        6:'volume'}));


   $('#table1').bootstrapTable("destroy");
   $('#table1').bootstrapTable({
            data: dataframe,
            sortStable: true,
            pagination : true,
            search : true
            
   });
}

Perhatikan ketika menjalankan pertama kali, akan terasa lambat karena harus request AJAX terlebih dahulu, namun ketika F5 /refresh akan sangat cepat karena tidak perlu melakukan request AJAX.

See also  Time Sleep pada Looping Java Script dan Ubah Value Component HTML

User juga diberikan akses untuk request AJAX secara manual bila ada update data.

$('#btn').click(function(){
   loadingdata(); //untuk update data jika diperlukan
   
});

Berikut kode lengkap nya

<html lang="en">
    <head>
    	<!-- sisipkan jquery -->
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
      <!-- Menyisipkan table
         https://bootstrap-table.com
       -->
      <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
      <link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">

      <!-- Menyisipkan Bootstrap -->
      <link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />

      <!-- tidy -->
      <script src="https://d3js.org/d3-array.v2.min.js"></script>
      <script src="https://www.unpkg.com/@tidyjs/tidy/dist/umd/tidy.min.js"></script>
      <!-- pengaturan tidy -->
      <script>
     		const { tidy, fill,mutate,rename, arrange, desc ,view,filter,debug,distinct,select,leftJoin,innerJoin,rightJoin} = Tidy;
      </script>  
   



   </head>
   <body>
      <h3>Harga Saham</h3>
      <button class="btn btn-primary mb-3" id="btn" type="button">OK</button>
      <table  id="table1"   data-toggle="table"  data-height="460" data-toolbar=".toolbar" data-sortable="true">							
           <thead>
            <tr>
              <th data-field="date">Date</th>
              <th data-field="stockcode">Stock Code</th>
              <th data-field="open">Open</th>
              <th data-field="high">High</th>
              <th data-field="low">Low</th>
              <th data-field="close">Close</th>
              <th data-field="volume" data-sortable="false" data-align="right">Volume</th>
            </tr>
           </thead>
         </table>	

   </body>
   <script>

      //variabel global
      var dataframe = [];


      function formatDate(date) {
          var d = new Date(date),
              month = '' + (d.getMonth() + 1),
              day = '' + d.getDate(),
              year = d.getFullYear();

          if (month.length < 2) 
              month = '0' + month;
          if (day.length < 2) 
              day = '0' + day;

          return [year, month, day].join('-');
      }
      

      //fungsi untuk AJAX 
      function loadingdata(){
         let url = 'https://softscients.com/stocks/index.php/yahoo/getStock2';
         $.getJSON(url,function (response) {
            //jadikan array saja
            let ohc = response.map(function (data, index, array) {
                                 let date = data.d;
                                 let stockcode = data.s;
                                 let open = data.o;
                                 let high = data.h;
                                 let low = data.l;
                                 let close = data.c;
                                 let volume = data.v;						
                                 return [date,stockcode,open,high,low,close,volume];
                              });


            //untuk simpan data ke local storage
            window.localStorage.setItem("data",JSON.stringify(ohc));

            dataframe = tidy(ohc, rename({ 0:'date', 
                                 1 :'stockcode',
                                 2:'open',
                                 3:'high',
                                 4:'low',
                                 5:'close',
                                 6:'volume'}));


            $('#table1').bootstrapTable("destroy");
            $('#table1').bootstrapTable({
                     data: dataframe,
                     sortStable: true,
                     pagination : true,
                     search : true
                     
            });
            let code = tidy(dataframe, distinct(['stockcode']),select(['stockcode']));
            alert("Jumlah emiten yaitu : "+code.length);

         });
      };


      $('#btn').click(function(){
         loadingdata(); //untuk update data jika diperlukan
         
      });

      //pengecekan ada tidak local storage??
      if(window.localStorage.getItem("data")==null){
         alert("tidak ada local storage, lakukan request AJAX");
         //artinya tidak ada local storage
         //sehingga butuh request AJAX dengan memanggil function loadingdata
         loadingdata();


      }else{
         let json  = window.localStorage.getItem("data");
         let ohc = jQuery.parseJSON(json);
         dataframe = tidy(ohc, rename({ 0:'date', 
                              1 :'stockcode',
                              2:'open',
                              3:'high',
                              4:'low',
                              5:'close',
                              6:'volume'}));
         
         $('#table1').bootstrapTable("destroy");
         $('#table1').bootstrapTable({
                  data: dataframe,
                  sortStable: true,
                  pagination : true,
                  search : true
                  
         });
      }
      
      
   </script>
</html>

Kesimpulan

Local Storage sangat membantu sekali dalam menghemat penggunaan data internet disisi klien namun dengan batasan sebagai berikut

  • Hindari menyimpan data sensitif seperti username dan password
  • Hanya mampu menampung data sebesar 5MB
  • Hindari penggunaan JSON lebih baik menggunakan array karena tidak banyak menggunakan karakter tambahan
See also  Function Map pada Java Script untuk Looping Array JSON

Selain cara diatas dengan menambahkan tombol manual untuk request AJAX, kalian bisa kok melakukan optimasi dengan cara dibuat otomatis misalkan dengan cara menyimpan tanggal update sehingga ketika tanggal update tidak cocok dengan server akana dilakukan request AJAX.

Demo secara live bisa kalian peroleh di https://softscients.com/stocks/index.php/screening#

 

 

Leave a Reply

Your email address will not be published.




Enter Captcha Here :