Perbedaan yang menonjol antara localStorage dan sessionStorage adalah localStorage menyimpan data tanpa tanggal kedaluwarsa, sedangkan sessionStorage menyimpan data dari satu sesi.
Hampir semua organisasi bisnis menggunakan situs web untuk menjangkau pelanggan mereka dan untuk memberi tahu mereka tentang produk dan layanan yang mereka tawarkan. Bahasa utama yang membantu mengembangkan situs web adalah HTML, yang merupakan singkatan dari HyperText Markup Language. Ini membantu untuk membangun struktur halaman web. Semua teknologi web lainnya, seperti CSS dan JavaScript didasarkan pada HTML. Selanjutnya, ada berbagai versi HTML. Versi terbaru dari HTML adalah HTML5 . Ini menyediakan karakteristik tambahan seperti SVG, audio, video, kanvas, geolokasi, dll. HTML5 juga menyediakan dua kemampuan penyimpanan web yang memungkinkan aplikasi web untuk menyimpan data secara lokal di dalam browser pengguna. Ini lebih aman dan memungkinkan penyimpanan data dalam jumlah besar tanpa memengaruhi kinerja situs web. Selain itu, localStorage dan sessionStorage adalah dua objek penyimpanan web untuk menyimpan data di mesin klien.
Topik bahasan kami tentang:
- Apa itu Penyimpanan lokal? – Definisi, Fungsionalitas 2. Apa itu sessionStorage? -Definisi, Fungsionalitas 3. Perbedaan Antara Penyimpanan lokal dan Penyimpanan sesi -Perbandingan perbedaan utama
Istilah Utama
HTML5, Penyimpanan lokal, Penyimpanan sesi, Penyimpanan Web
Yang perlu anda ketahui tentang Penyimpanan lokal?
Penyimpanan lokal adalah objek yang membantu menyimpan data tanpa tanggal kedaluwarsa. Maka dari itu, data ini tidak akan dihapus meskipun browser ditutup. Dengan kata lain, pengguna dapat mengakses penyimpanan lokal halaman tanpa batasan waktu. Jadi, dimungkinkan untuk memperoleh data pada hari berikutnya atau setelah seminggu atau setahun.
Lihat kode di bawah ini.
localStorage.setItem(“nama depan”, “Ann”);
document.getUnsurtById(“result1”).innerHTML = localStorage.getItem(“ nama depan ”);
Kode di atas membuat penyimpanan lokal dengan pasangan nama dan nilai. Namanya adalah “nama depan” sedangkan nilainya adalah “Ann”. Baris kedua membantu mendapatkan nilai nama depan dan memasukkannya ke dalam unsur dengan id yang disebut result1.
Selanjutnya, dimungkinkan untuk menghapus item localStorage “nama depan” sebagai berikut.
localStorage.removeItem(“nama depan”);
Yang perlu anda ketahui tentang sessionStorage?
Fungsionalitas sessionStorage mirip dengan localStorage, tetapi menyimpan data hanya untuk satu sesi. Maka dari itu, data dihapus ketika pengguna menutup tab browser. Jadi, ada baiknya menambahkan data ke penyimpanan sesi. Dimungkinkan untuk mengaksesnya dengan halaman mana pun dari situs yang sama yang dibuka di jendela itu. Setelah pengguna menutup jendela, sesi hilang. Demikian juga, objek sessionStorage memungkinkan data string dari sesi tertentu.
Perbedaan Antara Penyimpanan lokal dan Penyimpanan sesi
Definisi
localStorage adalah jenis objek penyimpanan web yang tersedia dalam HTML 5 yang memungkinkan penyimpanan data tanpa tanggal kedaluwarsa. Sebaliknya, sessionStorage adalah jenis objek penyimpanan web yang tersedia dalam HTML 5 yang memungkinkan penyimpanan data untuk satu sesi.
Penggunaan
Selain itu, localStorage dirancang untuk penyimpanan yang mencakup beberapa jendela, dan bertahan di luar sesi saat ini. Di sisi lain, sessionStorage memungkinkan pengguna untuk melakukan satu transaksi tetapi dapat melakukan beberapa transaksi di jendela yang berbeda secara bersamaan.
Kata terakhir
Singkatnya, penyimpanan web HTML 5 menyediakan dua objek penyimpanan untuk menyimpan data di mesin klien: localStorage dan sessionStorage. Mereka membantu menyimpan sejumlah besar data secara lokal daripada cookie biasa. Namun, Perbedaan yang menonjol antara localStorage dan sessionStorage adalah localStorage menyimpan data tanpa tanggal kedaluwarsa, sedangkan sessionStorage menyimpan data dari satu sesi.
Sumber bacaan:
1.HTML5 Web Storage, Tersedia di sini . 2.Tutorialspoint.com. “Penyimpanan Web HTML5.” www.tutorialspoint.com, Tersedia di sini .
Sumber gambar:
- “Logo resmi HTML5” Oleh W3C ( CC BY 3.0 ) melalui Commons Wikimedia
