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
- Date disingkat menjadi d,
- Low disingkat dengan l,
- 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
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.
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
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#