08-Web Storage

Web Storage
Kita sudah sampai di penghujung materi dari kelas ini. Selamat bagi Anda
yang sudah menguasai dasar dari tiga pilar pembentuk website. Pada
materi kali ini kita akan berkenalan mengenai salah satu web API yang
menarik untuk diterapkan pada proyek kalkulator, yakni Web Storage.
Apa itu Web Storage?

Web storage adalah salah satu Web API yang dapat menyimpan data
secara lokal pada sisi client. Berbeda dengan objek atau array, data yang
disimpan pada objek atau array JavaScript bersifat sementara, dan akan
hilang jika terjadi reload atau pergantian URL pada browser. Sedangkan
data yang disimpan pada Web Storage akan bertahan lebih lama karena
data akan disimpan pada storage browser.
Sebelum HTML5, kita melakukan hal ini dengan menggunakan cookies,

namun penyimpanan cookies terbatas. Dengan hadirnya Web Storage
kita dapat menampung data lebih besar dan tentunya lebih aman.
Data yang disimpan web storage tersedia berdasarkan domain. Artinya,

data pada suatu domain web hanya dapat diakses oleh domainnya itu
sendiri. Web storage dapat menampung sebesar 10MB untuk satu
domain.
Tipe Web Storage

Web API menyediakan dua tipe Web Storage untuk kita gunakan,
yakni sessionStorage dan localStorage.
Sebelum menggunakan Web Storage

baik sessionStorage atau localStorage, kita perlu memastikan browser
support terhadap fitur tersebut, dengan cara:
1. if (typeof(Storage) !== 'undefined') {

2. // Browser mendukung sessionStorage/localStorage.
3. } else {
4. // Browser tidak mendukung sessionStorage/LocalStorage
5. }
Seharusnya browser yang ada pada saat ini sudah mendukung kedua
fitur tersebut. Google Chrome dan Mozilla Firefox tentu memilikinya.
Pada sessionStorage atau localStorage data yang disimpan adalah nilai

primitif seperti number, boolean, atau string. Namun kita juga dapat
menyimpan data berbentuk objek dengan mengubahnya dalam
bentuk string, begitu pula sebaliknya ketika kita ingin menggunakan
datanya kembali.
Untuk menyimpan dan mengakses data pada storage, metode yang

digunakan adalah key-value. Di sini key menjadi sebuah kunci untuk
mengakses data pada storage.
Data yang disimpan pada Web Storage dapat kita lihat menggunakan
DevTools pada tab Application (Google Chrome)
atau tab Storage (Mozilla Firefox).
Data Local Storage pada Google Chrome
Data Local Storage pada Mozilla Firefox
Session Storage
Tipe storage yang pertama adalah Session Storage yang mana digunakan
untuk menyimpan data sementara pada browser. Data akan hilang ketika
browser atau tab browser ditutup.
Untuk menggunakan Session Storage kita gunakan object sessionStorage,

kemudian untuk menyimpan datanya gunakan method setItem(), method
ini membutuhkan dua argumen yakni key dan nilai yang akan
dimasukkan. Kemudian untuk mengakses data yang sudah dimasukkan
kita gunakan method getItem() dan gunakan key sebagai argumen
methodnya.
Berikut contoh penerapan dari session storage:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Session Storage</title>
5. </head>
6. <body>
7. <p>Anda sudah menekan tombol sebanyak <span id="count"></span>
kali</p>
8. <button id="button">Click Disini!</button>
9.
10. <script>
11. const cacheKey = 'NUMBER';
12. if (typeof (Storage) !== 'undefined') {
13. // pengecekkan apakah data sessionStorage dengan key NUMBER
tersedia atau belum
14. if (sessionStorage.getItem(cacheKey) === 'undefined') {
15. // Jika belum maka akan atur dengan nilai awal yakni 0
16. sessionStorage.setItem(cacheKey, 0);
17. }
18.
19. const button = document.querySelector('#button');
20. const count = document.querySelector('#count');
21. button.addEventListener('click', function (event) {
22. let number = sessionStorage.getItem(cacheKey);
23. number++;
24. sessionStorage.setItem(cacheKey, number);
25. count.innerText = sessionStorage.getItem(cacheKey);
26. });
27. } else {
28. alert('Browser tidak mendukung Web Storage');
29. }
30. </script>
31. </body>
32. </html>
Bisa kita lihat bahwa data yang disimpan pada sessionStorage akan
bertahan jika terjadi reload pada browser, namun data tersebut akan
hilang apabila tab browser atau browser itu sendiri ditutup.
Local Storage
Tipe storage yang kedua adalah Local Storage yang serupa dengan
session storage, namun data yang disimpan tidak akan hilang bila
browser atau tabs browser ditutup. Kita bisa menghapus data pada local
storage dengan method removeItem().
Untuk penggunaan localStorage identik dengan sessionStorage,

perbedaannya storage ini diakses melalui object localStorage. Berikut
contoh penerapan dari local storage:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <title>Local Storage</title>
5. </head>
6. <body>
7. <p>Anda sudah menekan tombol sebanyak <span id="count"></span>
kali</p>
8. <button id="button">Click Disini!</button>
9. <button id="clear">Hapus Storage</button>
10.
11. <script>
12. const cacheKey = 'NUMBER';
13. if (typeof (Storage) !== 'undefined') {
14. // pengecekkan apakah data localStorage dengan key NUMBER
tersedia atau belum
15. if (localStorage.getItem(cacheKey) === 'undefined') {
16. // Jika belum maka akan atur dengan nilai awal yakni 0
17. localStorage.setItem(cacheKey, 0);
18. }
19.
20. const button = document.querySelector('#button');
21. const clearButton = document.querySelector('#clear');
22. const count = document.querySelector('#count');
23. button.addEventListener('click', function (event) {
24. let number = localStorage.getItem(cacheKey);
25. number++;
26. localStorage.setItem(cacheKey, number);
27. count.innerText = localStorage.getItem(cacheKey);
28. });
29.
30. clearButton.addEventListener('click', function (event) {
31. localStorage.removeItem(cacheKey);
32. });
33. } else {
34. alert('Browser tidak mendukung Web Storage');
35. }
36. </script>
37. </body>
38. </html>
Pada gif di atas kita bisa mengetahui bahwa data yang disimpan
pada localStorage akan bertahan walaupun jendela browser atau tab
browser ditutup, untuk menghapus datanya bisa dengan tombol “Hapus
Storage” dimana tombol tersebut akan memanggil
method localStorage.removeItem().
Bagaimana? Cukup mudah kan untuk menggunakan Web Storage?

Selanjutnya kita akan coba terapkan localStorage pada Web Kalkulator
yang kita buat untuk menampung riwayat kalkulasi yang pengguna
lakukan.
Menambahkan Riwayat Kalkulasi pada Web

Kalkulator
Kali ini kita akan menerapkan apa yang sudah dipelajari sebelumnya
mengenai Web Storage. Pada kasus ini tipe storage yang cocok untuk
digunakan pada Web Kalkulator adalah localStorage, karena data akan
tetap bertahan meskipun browser sudah tertutup.
Kita akan memisahkan berkas JavaScript yang akan kita buat kali ini
dengan yang sudah kita buat sebelumnya. Jadi untuk langkah awal
silakan buka kembali proyek kalkulator yang sudah kita buat, buat berkas
JavaSript baru di dalam folder assets kemudian beri nama “storage.js”.
Maka struktur proyek sekarang nampak seperti gambar berikut:
Sebelum menuliskan kode pada berkas storage.js, kita siapkan terlebih

dahulu elemen table untuk menampilkan daftar riwayat kalkulasi.
Menyiapkan Tabel Elemen
Silakan buka berkas index.html, kemudian buat elemen div baru dengan
menerapkan nilai class history dan card. Letakan elemen tersebut
tepat di atas tag <script> pada akhir </body>.
1. .......
2. <div class="history card">
3.
4. </div>
5.
6. <script src="assets/kalkulator.js"></script>
7. </body>
Kemudian di dalam elemen <div> tersebut buat

elemen heading dan table seperti pada kode berikut:
2. <h2>Riwayat Perhitungan</h2>
3. <table>
4. <thead>
5. <tr>
6. <th>Angka Pertama</th>
7. <th>Operator</th>
8. <th>Angka Kedua</th>
9. <th>Hasil</th>
10. </tr>
11. </thead>
12. <tbody id="historyList"></tbody>
13. </table>
14. </div>
Elemen <tbody> yang kita beri id historyList merupakan elemen yang

akan menampung data dinamis berdasarkan data dari localStorage yang
ada. Kita akan memberi konten pada elemen ini secara dinamis
menggunakan JavaScript nantinya.
Keseluruhan berkas pada index.html sekarang akan nampak seperti ini:
1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>Web Calculator</title>
6. <link rel="stylesheet" href="assets/style.css">
7. <meta name="viewport" content="width=device-width, initial-scale=1.
0">
8. </head>
9.
10. <body>
11. <div class="flex-container-column card">
12. <div class="display">
13. <h1 id="displayNumber">0</h1>
14. </div>
15. <div class="flex-container-row">
16. <div class="button">7</div>

19. <div class="button negative">+/-</div>
20. </div>
25. <div class="button operator">-</div>
26. </div>
31. <div class="button operator">+</div>
32. <!DOCTYPE html>

33. <html>
34.
35. <head>
36. <title>Web Calculator</title>
37. <link rel="stylesheet" href="assets/style.css">
38. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
39. </head>
40.
41. <body>
42. <div class="flex-container-column card">
43. <div class="display">
44. <h1 id="displayNumber">0</h1>
45. </div>
50. <div class="button negative">+/-</div>
51. </div>
56. <div class="button operator">-</div>
57. </div>
62. <div class="button operator">+</div>
63. </div>
65. <div class="button clear">CE</div>
67. <div class="button equals double">=</div>
68. </div>
69. </div>
71. <h2>Riwayat Perhitungan</h2>
72. <table>
73. <thead>
74. <tr>
75. <th>Angka Pertama</th>
76. <th>Operator</th>
77. <th>Angka Kedua</th>
78. <th>Hasil</th>
79. </tr>
80. </thead>
81. <tbody id="historyList"></tbody>
82. </table>
83. </div>
84.
86. </body>
87.
88. </html>
Selanjutnya kita akan menerapkan styling pada tabel riwayat agar
informasi lebih mudah dibaca.
Menerapkan styling pada tabel riwayat

Sebelumnya kita sudah membuat elemen tabel yang nantinya akan
menjadi tempat informasi riwayat kalkulasi, namun tampilannya masih
kurang baik. Kita akan merombaknya dengan menerapkan CSS pada
elemen tersebut.
Silakan buka berkas style.css, kemudian tambahkan rule berikut:
1. .history {
2. width: 80%;
3. margin: 30px auto 0 auto;

4. overflow: scroll;
5. }
Rule tersebut akan mengatur lebar 80% dari viewport pada

elemen <div> yang menerapkan class history. Kemudian terapkan pada
properti overflow dengan nilai scroll sehingga elemen <div> akan
memiliki scroll bar secara horizontal dan vertikal.
Lalu tambahkan juga rule berikut pada style.css:
1. table {
2. border-collapse: collapse;
3. border-spacing: 0;
4. width: 100%;
5. border: 1px solid #ddd;
6. }
Rule tersebut akan membuat tabel memiliki lebar 100% terhadap

parentnya dan menetapkan border pada tepian tabelnya.
Lanjut kita tambahkan rule berikut untuk mengatur padding pada table
head (<th>) dan table data (<td>) agar ukuran tampak lebih proporsional.
1. th,
2. td {
3. text-align: center;
4. padding: 16px;
5. }
Lalu kita tambahkan rule berikut untuk menerapkan backgroud-

color pada element <th> dan <tr>, sementara untuk elemen <tr> kita
manfaatkan pseudo-class dalam selectornya.
1. th {
2. background-color: orange;
3. color: white;
4. }
5.
6. tr:nth-child(even) {
7. background-color: #d2d2d2;
8. }
Untuk mengoptimalkan tampilan pada perangkat seluler, kita atur

elemen <div> untuk menerapkan width: 100% pada @media query.
1. @media screen and (max-width: 513px) {
2. .button {
3. padding: 10px;
4. }
5. .history {
6. width: 100%;
7. }
8. }
Sekarang struktur kode pada berkas styles.css akan tampak seperti ini:
1. * {
2. box-sizing: border-box;
3. }
4.
5. body {
6. font-family: sans-serif;
7. }
8.
9. .flex-container-column {
10. display: flex;
11. /* properti pendukung */
12. flex-direction: column;
13. max-width: 800px;
14. margin: 0 auto;
15. text-align: right;
16. }
17.
18. .flex-container-row {
19. display: flex;
20. }
21.
22. .button {
23. flex-basis: 25%;
24. /* properti pendukung */
25. font-size: 1.5em;
27. padding: 40px;
28. border: 1px solid black;
29. background: -webkit-linear-gradient(top, #d2d2d2, #ddd);
30. cursor: pointer;
31. }
32.
33. .double {
34. flex-basis: 50%;
35. }
36.
37. .display {
38. color: white;
39. width: 100%;
40. padding: 10px 20px;
41. background-color: #333333;
42. border: 1px solid black;
43. font-size: 2em;
44. }
45.
46. .operator,
47. .negative,
48. .equals {
49. background: orange;
50. }
51.
52. .card {
53. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
54. border-radius: 5px;
55. padding: 30px;
56. margin-top: 20px;
57. }
58.
59. .button:hover {
60. font-weight: bold;
61. }
62.
63. .history {
64. width: 80%;
65. margin: 30px auto 0 auto;
66. overflow: scroll;
67. }
68.
69. table {
70. border-collapse: collapse;
71. border-spacing: 0;
72. width: 100%;
73. border: 1px solid #ddd;
74. }
75.
76. th,
77. td {
79. padding: 16px;
80. }
81.
82. th {
83. background-color: orange;
84. color: white;
85. }
86.
87. tr:nth-child(even) {
88. background-color: #d2d2d2;
89. }
90.
91. @media screen and (max-width: 513px) {
92. .button {
93. padding: 10px;
94. }
95. .history {
96. width: 100%;
97. }
98. }
Setelah persiapan tampilan table selesai, selanjutnya kita akan mulai

menerapkan JavaScript untuk mengelola data riwayat kalkulasinya.
Menerapkan localStorage pada Kalkulator

Sebelum kita menuliskan sintaks pada storage.js, pastikan kita sudah
menghubungkan berkas tersebut dengan index.html seperti berikut ini:
1. ....
2. <script src="assets/storage.js"></script>
4. </body>
Pastikan juga kita menghubungkannya sebelum kalkulator.js karena kita

akan menggunakan storage.js pada berkas kalkulator.js. Alhasil,
berkas storage.js perlu dimuat terlebih dahulu.
Setelah kita menghubungkan berkas JavaScript dengan HTML, buka

berkas storage.js. Kemudian buat variabel CACHE_KEY dengan
nilai “calculation_history”.
1. const CACHE_KEY = "calculation_history";
Variabel ini digunakan sebagai key untuk mengakses dan menyimpan

data pada localStorage.
Selanjutnya kita buat fungsi checkForStorage() dengan mengembalikan

nilai boolean dari pengecekan fitur Storage pada browser.
1. function checkForStorage() {
2. return typeof(Storage) !== "undefined"
3. }
Fungsi tersebut akan kita gunakan di dalam if statement setiap fungsi

transaksi pada localStorage.
Lalu kita buat juga fungsi untuk menyimpan data riwayat kalkulasi
pada localStorage. Fungsi tersebut memiliki satu argumen yang
merupakan data dari hasil kalkulasi yang nantinya akan dimasukkan ke
dalam localStorage.
1. function putHistory(data) {
2. if (checkForStorage()) {
3. let historyData = null;
4. if (localStorage.getItem(CACHE_KEY) === null) {
5. historyData = [];
6. } else {
7. historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
8. }
9.
10. historyData.unshift(data);
11.
12. if (historyData.length > 5) {
13. historyData.pop();
14. }
15.
16. localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));
17. }
18. }
Banyak istilah kode yang asing pada kode di atas. Mari kita lihat satu per
satu.
Yang pertama fungsi JSON.parse() yang mana digunakan untuk

mengubah nilai objek dalam bentuk string kembali pada bentuk objek
JavaScript. Kemudian JSON.stringify() digunakan untuk mengubah objek
JavaScript ke dalam bentuk String. Seperti yang kita tahu,
bahwa localStorage hanya dapat menyimpan data primitif seperti string,
sehingga kita perlu mengubah objek ke dalam bentuk string jika ingin
menyimpan ke dalam localStorage.
JSON sendiri adalah singkatan dari JavaScript Object Notation. JSON

merupakan format yang sering digunakan dalam pertukaran data. Saat
ini JSON banyak diandalkan karena formatnya berbasis teks dan relatif
mudah dibaca.
Lalu di sana juga ada fungsi unshift(), fungsi ini digunakan untuk
menambahkan nilai baru pada array yang ditempatkan pada awal index.
Fungsi ini juga mengembalikan nilai panjang array setelah ditambahkan
dengan nilai baru.
Fungsi pop() di atas merupakan fungsi untuk menghapus nilai index

terakhir pada array, sehingga ukuran array historyData tidak akan pernah
lebih dari 5. Hal ini kita terapkan agar riwayat kalkulasi yang muncul
adalah lima hasil kalkulasi terakhir oleh pengguna.
Dari sini kita bisa mengetahui bahwa data yang disimpan

pada localStorage adalah array yang berisi beberapa objek hasil kalkulasi,
kemudian array tersebut diubah menjadi string. Struktur data tersebut
dalam bentuk string nampak seperti ini:
1. [
2. {
3. "firstNumber": "23",
4. "secondNumber": "15",
5. "operator": "-",
6. "result": 8
7. },
8. {
9. "firstNumber": "23",
10. "secondNumber": "6",
11. "operator": "-",
12. "result": 17
13. }
14. ]
Selanjutnya kita buat fungsi untuk mendapatkan data dari localStorage.

Kita namakan fungsi tersebut “showHistory().”
1. function showHistory() {
3. return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
4. } else {
5. return [];
6. }
7. }
Fungsi ini mengembalikan nilai array dari localStorage jika sudah memiliki
nilai sebelumnya melalui JSON.parse(). Namun jika localStorage masih
kosong, fungsi ini akan mengembalikan nilai array kosong.
Lalu yang terakhir, kita tambahkan fungsi untuk merender data riwayat
kalkulasi pada tabel HTML. Fungsi ini diberi nama dengan renderHistory().
1. function renderHistory() {
2. const historyData = showHistory();
3. let historyList = document.querySelector("#historyList");
4.
5.
6. // selalu hapus konten HTML pada elemen historyList agar tidak mena
mpilkan data ganda
7. historyList.innerHTML = "";
8.
9.
10. for (let history of historyData) {
11. let row = document.createElement('tr');
12. row.innerHTML = "<td>" + history.firstNumber + "</td>";
13. row.innerHTML += "<td>" + history.operator + "</td>";
14. row.innerHTML += "<td>" + history.secondNumber + "</td>";
15. row.innerHTML += "<td>" + history.result + "</td>";
16.
17.
18. historyList.appendChild(row);
19. }
20. }
Pada akhir berkas storage.js, panggil fungsi renderHistory(); agar data

history muncul ketika website pertama kali dijalankan.
1. renderHistory();
Sampai saat ini, struktur kode pada storage.js akan tampak seperti
berikut:
1. const CACHE_KEY = "calculation_history";
2.
3. function checkForStorage() {
4. return typeof(Storage) !== "undefined";
5. }
6.
7. function putHistory(data) {
9. let historyData = null;
10. if (localStorage.getItem(CACHE_KEY) === null) {
11. historyData = [];
12. } else {
13. historyData = JSON.parse(localStorage.getItem(CACHE_KEY));
14. }
15.
16. historyData.unshift(data);
17.
18. if (historyData.length > 5) {
19. historyData.pop();
20. }
21.
22. localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));

23. }
24. }
25.
26. function showHistory() {
27. if (checkForStorage) {
28. return JSON.parse(localStorage.getItem(CACHE_KEY)) || [];
29. } else {
30. return [];
31. }
32. }
33.
34. function renderHistory() {
35. const historyData = showHistory();
36. let historyList = document.querySelector("#historyList");
37. historyList.innerHTML = "";
38.
39. for (let history of historyData) {
40. let row = document.createElement('tr');
41. row.innerHTML = "<td>" + history.firstNumber + "</td>";
42. row.innerHTML += "<td>" + history.operator + "</td>";
43. row.innerHTML += "<td>" + history.secondNumber + "</td>";
44. row.innerHTML += "<td>" + history.result + "</td>";
45.
46. historyList.appendChild(row);
47. }
48. }
49.
50. renderHistory();
Terakhir kita gunakan fungsi putHistory() yang sudah kita buat ketika
kalkulator melakukan proses kalkulasi, tepatnya pada
fungsi performCalculation() berkas kalkulator.js.
Sebelum memanggil fungsi putHistory(), tentu kita harus menyiapkan

data yang akan dikirimkan sebagai argumen fungsi tersebut.
Pada performCalculation() kita buat variabel baru dengan
nama history yang merupakan objek dari data history yang akan
dikirimkan. Struktur objeknya tampak seperti berikut:
1. const history = {
2. firstNumber: calculator.firstNumber,
3. secondNumber: calculator.displayNumber,
4. operator: calculator.operator,
5. result: result
6. }
Setelah menyiapkan datanya, barulah kita bisa memanggil

fungsi putHistory() dengan mengirimkan variabel history sebagai
argumen fungsinya. Jangan lupa juga panggil fungsi renderHistory() agar
riwayat kalkulasi langsung tampil pada tabel setelah kalkulasi dilakukan.
Sehingga sekarang struktur kode dari fungsi performCalculation() akan

tampak seperti berikut:
1. function performCalculation() {
2. if (calculator.firstNumber == null || calculator.operator == null)
{
3. alert("Anda belum menetapkan operator");
4. return;
5. }
6.
7. let result = 0;
8. if (calculator.operator === "+") {
9. result = parseInt(calculator.firstNumber) + parseInt(calculator
.displayNumber);
10. } else {
11. result = parseInt(calculator.firstNumber) - parseInt(calculato
r.displayNumber)
12. }
13.
14. // objek yang akan dikirimkan sebagai argumen fungsi putHistory()
15. const history = {
16. firstNumber: calculator.firstNumber,
17. secondNumber: calculator.displayNumber,
18. operator: calculator.operator,
19. result: result
20. }
21. putHistory(history);
22. calculator.displayNumber = result;
23. renderHistory();
24. }
Pada tahap ini seharusnya kalkulator kita sudah dapat menampilkan
riwayat kalkulasi yang dilakukan pengguna.
Selamat, Anda sudah berhasil membuat aplikasi kalkulator berbasis web

dengan baik. Good Job!

08-Web Storage

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

08-Web Storage

Diunggah oleh

Hak Cipta:

Format Tersedia

Web Storage

Apa itu Web Storage?

Sebelum HTML5, kita melakukan hal ini dengan menggunakan cookies,

Data yang disimpan web storage tersedia berdasarkan domain. Artinya,

Tipe Web Storage

Sebelum menggunakan Web Storage

1. if (typeof(Storage) !== 'undefined') {

4. // Browser tidak mendukung sessionStorage/LocalStorage

Pada sessionStorage atau localStorage data yang disimpan adalah nilai

Untuk menyimpan dan mengakses data pada storage, metode yang

Untuk menggunakan Session Storage kita gunakan object sessionStorage,

Berikut contoh penerapan dari session storage:

Untuk penggunaan localStorage identik dengan sessionStorage,

Bagaimana? Cukup mudah kan untuk menggunakan Web Storage?

Menambahkan Riwayat Kalkulasi pada Web

Maka struktur proyek sekarang nampak seperti gambar berikut:

Sebelum menuliskan kode pada berkas storage.js, kita siapkan terlebih

2. <div class="history card">

Kemudian di dalam elemen <div> tersebut buat

1. <div class="history card">

Elemen <tbody> yang kita beri id historyList merupakan elemen yang

Keseluruhan berkas pada index.html sekarang akan nampak seperti ini:

6. <link rel="stylesheet" href="assets/style.css">

7. <meta name="viewport" content="width=device-width, initial-scale=1.

11. <div class="flex-container-column card">

12. <div class="display">

13. <h1 id="displayNumber">0</h1>

15. <div class="flex-container-row">

16. <div class="button">7</div>

18. <div class="button">9</div>

19. <div class="button negative">+/-</div>

21. <div class="flex-container-row">

22. <div class="button">4</div>

23. <div class="button">5</div>

24. <div class="button">6</div>

25. <div class="button operator">-</div>

27. <div class="flex-container-row">

28. <div class="button">1</div>

29. <div class="button">2</div>

30. <div class="button">3</div>

31. <div class="button operator">+</div>

32. <!DOCTYPE html>

Menerapkan styling pada tabel riwayat

Silakan buka berkas style.css, kemudian tambahkan rule berikut:

3. margin: 30px auto 0 auto;

Rule tersebut akan mengatur lebar 80% dari viewport pada

Lalu tambahkan juga rule berikut pada style.css:

Rule tersebut akan membuat tabel memiliki lebar 100% terhadap

Lalu kita tambahkan rule berikut untuk menerapkan backgroud-

Untuk mengoptimalkan tampilan pada perangkat seluler, kita atur

1. @media screen and (max-width: 513px) {

Setelah persiapan tampilan table selesai, selanjutnya kita akan mulai

Menerapkan localStorage pada Kalkulator

Pastikan juga kita menghubungkannya sebelum kalkulator.js karena kita

Setelah kita menghubungkan berkas JavaScript dengan HTML, buka

1. const CACHE_KEY = "calculation_history";

Variabel ini digunakan sebagai key untuk mengakses dan menyimpan

Selanjutnya kita buat fungsi checkForStorage() dengan mengembalikan

Fungsi tersebut akan kita gunakan di dalam if statement setiap fungsi

3. let historyData = null;

4. if (localStorage.getItem(CACHE_KEY) === null) {

12. if (historyData.length > 5) {

16. localStorage.setItem(CACHE_KEY, JSON.stringify(historyData));

Yang pertama fungsi JSON.parse() yang mana digunakan untuk