Penyimpanan Data Lokal HTML Menggunakan localStorage DOM
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, window.innerWidth HTML DOM dan Fungsinya, dan window.innerHeight HTML DOM dan Fungsinya.
Return Values: berfungsi untuk mengembalikan sebuah nilai Storage object.
- menyimpan data ke localStorage: localStorage.setItem("key", "value");
- membaca data dari localStorage: var name = localStorage.getItem("key");
- menghapus data dari localStorage: localStorage.removeItem("key");
<!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>
<!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>
- Penggunaan Properti pageXOffset Window DOM pada HTML
- Penggunaan Properti pageYOffset Window DOM pada HTML
- Penggunaan Properti Window Parent DOM pada HTML
- Penggunaan Properti screenLeft Window DOM pada HTML
- Penggunaan Properti screenTop Window DOM pada HTML
- Penggunaan Properti screenX Window DOM pada HTML
- Penggunaan Properti screenY Window DOM pada HTML
5 komentar untuk "Penyimpanan Data Lokal HTML Menggunakan localStorage DOM"
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 -
Sebutkan enam jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML?
BalasHapusBerikut ini adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML:
Hapus1. 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
Apa yang dimaksud dengan properti window.localStorage DOM pada HTML?
BalasHapusProperti 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.
HapusProperti localStorage merupakan properti yang mirip dengan sessionStorage, dimana perbedaannya adalah sessionStorage menyimpan data secara non permanen sedangkan localStorage adalah permanen.
Hapus