Home » Javascript » API Penyimpanan Web: Code dan Cara Membuatnya

API Penyimpanan Web: Code dan Cara Membuatnya

by Catur Kurnia Sari
by Catur Kurnia Sari

API Penyimpanan Web adalah sintaks sederhana untuk menyimpan dan mengambil data di browser. dan sangat mudah untuk digunakan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

API Penyimpanan Web didukung di semua browser:

ChromeEdgeFirefoxSafariOpera
YaYaYaYaYa

Objek localStorage

Objek localStorage menyediakan akses ke penyimpanan lokal untuk Situs Web tertentu. Hal ini memungkinkan untuk menyimpan, membaca, menambah, memodifikasi, dan menghapus item data untuk domain itu.

Data disimpan tanpa tanggal kadaluwarsa, dan tidak akan dihapus saat browser ditutup.

Data akan tersedia selama berhari-hari, berminggu-minggu, dan bertahun-tahun.

Metode setItem()

Metode localStorage.setItem() menyimpan item data dalam penyimpanan.

Dibutuhkan nama dan nilai sebagai parameter.

Contoh:

localStorage.setItem("name", "John Doe");

Metode getItem()

Metode localStorage.getItem() mengambil item data dari penyimpanan.

Dibutuhkan nama sebagai parameter.

Contoh:

localStorage.getItem("name");

Objek sessionStorage

Objek sessionStorage identik dengan objek localStorage.

Perbedaannya adalah objek sessionStorage menyimpan data untuk satu sesi.

Data tersebut dihapus saat browser ditutup.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

Metode setItem()

Metode sessionStorage.setItem () menyimpan item data dalam penyimpanan.

Dibutuhkan nama dan nilai sebagai parameter.

Contoh

sessionStorage.setItem("name", "John Doe");

Metode getItem()

Metode sessionStorage.getItem() mengambil item data dari penyimpanan.

Dibutuhkan nama sebagai parameter.

Contoh:

sessionStorage.getItem ("name");

Properti dan Metode Objek Penyimpanan

Properti/MethodDeskripsi
key(n)Menampilkan nama kunci ke-n dalam penyimpanan
lengthMengembalikan jumlah item data yang disimpan di objek Storage
getItem(keyname)Mengembalikan nilai dari nama kunci yang ditentukan
setItem(keynamevalue)Menambahkan kunci itu ke penyimpanan, atau memperbarui nilai kunci itu jika sudah ada
removeItem(keyname)Menghapus kunci itu dari penyimpanan
clear()Kosongkan semua kunci dari penyimpanan

Related Pages for Web Storage API

PropertiDeskripsi
window.localStorageMemungkinkan untuk menyimpan pasangan kunci / nilai di browser web. Menyimpan data tanpa tanggal kedaluwarsa
window.sessionStorageMemungkinkan untuk menyimpan pasangan kunci / nilai di browser web. Menyimpan data untuk satu sesi

You may also like