Lompat ke konten Lompat ke sidebar Lompat ke footer

Penyimpanan Data Lokal HTML Menggunakan localStorage DOM

Properti Window localStorage DOM pada HTML merupakan properti yang digunakan untuk memberikan ijin atau akses menyimpan nilai yang bersesuaian pada web browser menggunakan suatu object, dimana properti ini adalah properti yang bersifat read-only. Object yang telah disimpan menggunakan properti localStorage tidak akan mengalami expired meskipun browser tersebut telah ditutup atau di-close, sehingga data yang telah disimpan tersebut tidak akan hilang.

3 Sintak Properti localStorage DOM pada HTML
localStorage DOM HTML

Sebelum memahami lebih dalam materi tentang Penyimpanan Data Lokal HTML Menggunakan localStorage DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Panjang HTML Menggunakan window.length DOM [klik], window.innerWidth HTML DOM dan Fungsinya [klik], dan window.innerHeight HTML DOM dan Fungsinya [klik].

Return Values: berfungsi untuk mengembalikan sebuah nilai Storage object.

Sintak:
  • menyimpan data ke localStorage: localStorage.setItem("key", "value");
  • membaca data dari localStorage: var name = localStorage.getItem("key");
  • menghapus data dari localStorage: localStorage.removeItem("key");

Baca Juga:

Contoh: melakukan Save, Read, dan Remove data dari localStorage.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Window localStorage 

DOM pada HTML

</title>

 

<script>

// Menyimpan data secara lokal

function save() 

{

var fieldValue = document.getElementById('textfield').value;

 

localStorage.setItem('text', fieldValue);

}

 

// Membaca data

function get() 

{

var storedValue = localStorage.getItem('text');

 

if(storedValue) 

{

document.getElementById('textfield').value = storedValue;

}

 

}

 

// Menghapus data

function remove() 

{

document.getElementById('textfield').value = '';

 

localStorage.removeItem('text');

}

</script>

 

</head>

 

<body onload="get()">

 

<p1>

Ketik sesuatu pada teks field 

dan hasilnya akan disimpan 

secara lokal pada browser.

</p1>

 

<input 

type="text" 

id="textfield" />

 

<input 

type="button" 

value="save" 

onclick="save()" />

 

<input 

type="button" 

value="clear" 

onclick="remove()" />

 

<p2>

Ketika melakukan reload pada 

halaman ini, maka teks akan 

tetap berada pada posisi 

terebut.

</p2>

 

<p3>

<br>

Klik tombol untuk membersihkan data.

</p3>

 

</body>

 

</html>


Contoh: memeriksa tipe dan bentuk penyimpanan data.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Window localStorage 

DOM HTML

</title>

</head>

 

<body>

 

<div id="SHOW"></div>

 

<script>

if(typeof(Storage) !== "undefined"

{

localStorage.setItem("name", "Mauludi");

 

document.getElementById("SHOW").innerHTML =

localStorage.getItem("name");

 

else 

{

document.getElementById("SHOW").innerHTML =

"YOUR BROWSER DOES NOT" + "SUPPORT LOCALSTORAGE PROPERTY";

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Maharani, Mandariska Dara Aprillia, Marcela Andarista Maharani, Maulana Ishaq Handi Putra, dan Maulia Fandhi Suprapto.

5 komentar untuk "Penyimpanan Data Lokal HTML Menggunakan localStorage DOM"

  1. Sebutkan enam jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML:
      1. Google Chrome 4.0
      2. Internet Explorer 8.0
      3. Microsoft Edge 12.0
      4. Firefox 3.5
      5. Opera 10.5
      6. Safari 4.0

      Hapus
  2. Apa yang dimaksud dengan properti window.localStorage DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti window.localStorage DOM pada HTML merupakan properti yang bersifat read-only dari antarmuka window yang memungkinkan user untuk mengakses object storage yang berasal dari suatu dokumen, dimana datanya disimpan pada seluruh sesi browser.

      Hapus
    2. Properti localStorage merupakan properti yang mirip dengan sessionStorage, dimana perbedaannya adalah sessionStorage menyimpan data secara non permanen sedangkan localStorage adalah permanen.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -