Belajar HTML5 Dan Penyimpanan Data HTML5

Labkom99.com – Belajar HTML5 Dan Penyimpanan Data HTML5 dengan mudah. Pada penyimpanan data HTML5 menyediakan dua metode baru untuk menyimpan data di klien:

• Penyimpanan Lokal-Penyimpanan data tanpa batas waktu
• Penyimpanan Sesi-Data penyimpanan untuk sesi

Sebelumnya, ini semua dilakukan dengan cookie. Tetapi cookie tidak cocok untuk penyimpanan data dalam jumlah besar, karena cookie diteruskan oleh setiap permintaan ke server, yang membuat cookie menjadi sangat lambat dan tidak efisien.

Di HTML5, data tidak dikirim oleh setiap permintaan server, tetapi hanya jika diminta. Itu memungkinkan untuk menyimpan data dalam jumlah besar tanpa mempengaruhi kinerja situs web.

Untuk situs web yang berbeda, data disimpan di area yang berbeda, dan situs web hanya dapat mengakses datanya sendiri.

Penyimpanan Lokal HTML5 (penyimpanan lokal) memungkinkan untuk menyimpan data di browser, yang dapat bertahan dalam sesi browser, mirip dengan cookie. Penyimpanan lokal juga dapat mengirim acara antara dua jendela browser, yang merupakan fitur yang sangat berguna.

Penyimpanan data adalah spesifikasi HTML baru, tepatnya bukan bagian dari spesifikasi HTML5. Tetapi penyimpanan data dan HTML5 dirilis pada waktu yang sama, sehingga biasanya dianggap sebagai bagian dari HTML5.

Penyimpanan data dasar

Penyimpanan data menggunakan metode pasangan nilai kunci sederhana, seperti tabel hash atau objek kamus. Seperti yang disebutkan sebelumnya, penyimpanan data dibagi menjadi dua jenis: Penyimpanan Lokal dan Penyimpanan Sesi.

Penyimpanan sesi tersedia di jendela browser yang sama selama jendela browser terbuka. Saat jendela browser ditutup, Penyimpanan Sesi yang terkait dengan jendela browser ini akan dihapus. Beberapa browser yang menunjuk ke sumber yang sama (URL) tidak dapat berbagi Penyimpanan Sesi masing-masing. Jendela lain yang muncul dari jendela browser yang sama dapat melihat Penyimpanan Sesi.

Penyimpanan Lokal berlaku untuk semua jendela browser dari domain yang sama. Data yang disimpan di Penyimpanan Lokal masih tersedia setelah jendela browser ditutup. Saat berikutnya browser membuka dan memuat halaman dari sumber yang sama, halaman tersebut dapat mengakses data yang disimpan di sana lagi.

sessionStorage dan localStorage objek

Penyimpanan Sesi dan Penyimpanan Lokal dapat diakses melalui dua objek JavaScript global:

• sessionStorage
• localStorage

sessionStorageObjek dan localStorageobjek diakses dengan cara yang sama. Hanya saja siklus hidup mereka dan visibilitas data yang disimpan berbeda.

Anda dapat mengatur atribut pada objek sessionStoragedan localStorage, seperti objek js biasa. Berikut ini contohnya:

sessionStorage.myProperty = "Hello World";
localStorage.myProperty   = "Hello World";

Pada contoh di atas, baris pertama kode menetapkan myPropertynilai properti Session Storage Hello World. Baris kedua kode menetapkan myPropertynilai properti Penyimpanan Lokal Hello World.

Anda hanya dapat menyimpan string di properti Penyimpanan Sesi dan Penyimpanan Lokal. Tipe data lain tidak dapat disimpan. Jika Anda perlu menyimpan objek javascript, Anda harus mengonversinya terlebih dahulu menjadi string JSON.

Anda dapat menghapus atribut Penyimpanan Sesi atau Penyimpanan Lokal. Berikut ini contohnya:

delete sessionStorage.myProperty;
delete localStorage.myProperty;

Anda juga dapat menggunakan 3 metode berikut untuk mengakses properti Penyimpanan Sesi atau Penyimpanan Lokal.

sessionStorage.setItem    ('propertyName', 'value');
sessionStorage.setItem    ('propertyName', 'value');
sessionStorage.getItem    ('propertyName');
sessionStorage.removeItem ('propertyName');
 
localStorage.setItem      ('propertyName', 'value');
localStorage.getItem      ('propertyName');
localStorage.removeItem   ('propertyName'); 

Ketiga metode di atas juga hanya menerima nilai string.

Melintasi penyimpanan data

Anda dapat melintasi pasangan nilai-kunci yang disimpan di Penyimpanan Sesi dan Penyimpanan Lokal. Metode traversal adalah dengan mengulangi kunci (nama properti) pada pasangan nilai-kunci. Misalnya, terlihat seperti berikut ini:

for(var i=0; i < sessionStorage.length; i++){
 
    var propertyName = sessionStorage.key(i);
 
    alert(  i + " : " + propertyName + " = " +
            sessionStorage.getItem(propertyName));
}   

Dalam kode di atas, sessionStorage.lengthatribut mengembalikan jumlah total atribut yang disimpan dalam objek sessionStorage.

Fungsi key()mengembalikan inama atribut (atau nama kunci) yang sesuai dengan parameter .

Event penyimpanan data

Objek penyimpanan memicu beberapa event, dan Anda dapat memantau event ini di program Anda. Event penyimpanan akan dipicu saat Anda memasukkan, memperbarui, atau menghapus properti Penyimpanan Sesi atau Penyimpanan Lokal.

Untuk Penyimpanan Sesi, event ini hanya terlihat di jendela pop-up atau iframe.

Event Penyimpanan Lokal dapat dilihat oleh semua jendela yang terbuka, termasuk jendela pop-up dan iframe.

Tambahkan event pemroses penyimpanan

Lampirkan kode pemantauan event ke objek penyimpanan yang mirip dengan berikut ini:

function onStorageEvent(storageEvent){
    alert("storage event");
}
window.addEventListener('storage', onStorageEvent, false); 

onStorageEvent()Fungsi adalah pengendali event.

addEventListener()Fungsi ini mendengarkan event penyimpanan dan memanggil fungsi event handler.

storageEventObjek event yang diteruskan ke pengendali event mirip dengan berikut ini:

StorageEvent {
    key;          // set Nama attribute key”changed“
    oldValue;     // Nilai Sebelum properti diubah
    newValue;     // Nilai setelah properti diubah
    url;          // url halaman yang melakukan perubahan
    storageArea;  // localStorage atau sessionStorage,
                  // tergantung dimana perubahan itu terjadi
}  

Anda dapat mengakses objek event yang disimpan ini di dalam event handler.