HTML penyimpanan lokal, lebih baik dari cookies .
Apa itu HTML Storage lokal?
Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookies , termasuk dalam setiap permintaan server. penyimpanan lokal lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa mempengaruhi kinerja website.
Tidak seperti cookies , batas penyimpanan jauh lebih besar [at least 5MB] dan informasi yang tidak pernah ditransfer ke server.
Penyimpanan lokal adalah per asal [per domain and protocol] . Semua halaman, dari satu asal, dapat menyimpan dan mengakses data yang sama.
Lokal dan sesi penyimpanan
penyimpanan web menawarkan dua daerah-daerah penyimpanan yang berbeda penyimpanan dan sesi penyimpanan yang berbeda dalam lingkup dan seumur hidup.
Data ditempatkan dalam penyimpanan lokal per asal [kombinasi protokol, hostname, dan nomor port seperti yang didefinisikan dalam kebijakan yang sama-asal] [data tersedia untuk semua skrip diambil dari halaman dari asal yang sama yang sebelumnya disimpan data] dan berlanjut setelah browser ditutup.
Penyimpanan sesi adalah per-asal-per-jendela-atau-tab dan terbatas pada masa jendela. Penyimpanan sesi ditujukan agar kasus terpisah dari aplikasi web yang sama untuk menjalankan di windows yang berbeda tanpa mengganggu satu sama lain, kasus penggunaan yang tidak didukung oleh cookies.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Storage lokal.
| Web Storage | 4.0 | 8,0 | 3,5 | 4.0 | 11,5 |
HTML Penyimpanan Lokal Objects
HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:
- window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
- window.sessionStorage menyimpan data untuk satu sesi [data hilang ketika tab browser ditutup] -
Sebelum menggunakan penyimpanan lokal, periksa dukungan browser untuk localStorage dan sessionStorage :
if[typeof[Storage] !== "undefined"] {
// Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support..
}
The localStorage Obyek
Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
// StorelocalStorage.setItem["lastname", "Smith"];// Retrieve
document.getElementById["result"].innerHTML = localStorage.getItem["lastname"];
Cobalah sendiri "Contoh menjelaskan:
- Buat localStorage nama / nilai pasangan dengan name="lastname" dan value="Smith"
- Mengambil nilai dari "lastname" dan masukkan ke dalam elemen dengan id = "hasil"
Contoh di atas juga dapat ditulis seperti ini:
// StorelocalStorage.lastname = "Smith";// Retrieve
document.getElementById["result"].innerHTML = localStorage.lastname;
Sintaks untuk menghapus "lastname" barang localStorage adalah sebagai berikut:
localStorage.removeItem["lastname"];
Catatan: pasang Nama / nilai selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh berikut menghitung jumlah kali seorang pengguna telah mengklik tombol. Dalam kode ini nilai string dikonversi menjadi angka untuk dapat meningkatkan counter:
if [localStorage.clickcount] { localStorage.clickcount = Number[localStorage.clickcount] + 1; } else { localStorage.clickcount = 1;} document.getElementById["result"].innerHTML = "You have clicked the button " +
localStorage.clickcount + " time[s].";
Cobalah sendiri "The sessionStorage Obyek
The sessionStorage objek adalah sama dengan localStorage objek, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data tersebut dihapus saat pengguna menutup tab browser tertentu.
Contoh berikut menghitung jumlah kali seorang pengguna telah mengklik tombol, dalam sesi saat ini:
if [sessionStorage.clickcount] { sessionStorage.clickcount = Number[sessionStorage.clickcount] + 1;} else { sessionStorage.clickcount = 1;} document.getElementById["result"].innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time[s] in this session.";
Cobalah sendiri "
Mekanisme storage yang tepat perlu dipilih, baik untuk storage perangkat lokal maupun untuk storage server berbasis awan. Mesin storage yang baik akan memastikan informasi Anda disimpan secara meyakinkan, mengurangi bandwidth, dan meningkatkan responsivitas. Strategi caching storage yang tepat merupakan blok pembangunan utama untuk memungkinkan pengalaman web seluler.
Artikel ini menyediakan fondasi ringkas untuk mengevaluasi layanan dan API storage, setelah itu kami akan menyediakan tabel perbandingan dan beberapa panduan umum. Tidak lama lagi, kami berencana menambahkan sumber daya untuk memahami berbagai topik storage pilihan lebih jauh lagi.
Taksonomi Storage
Mari kita mulai dengan memahami sebagian dimensi yang nanti bisa digunakan untuk menganalisis storage data aplikasi web. Nanti, kita akan menggunakan kerangka kerja ini untuk menguraikan satu per satu dan mengevaluasi berbagai opsi storage yang tersedia untuk developer web.
Model Data
Model untuk menyimpan unit data menentukan cara menyusun data secara internal, yang memengaruhi kemudahan penggunaan, biaya serta kinerja permintaan storage dan pengambilan.
**Terstruktur: **Data yang disimpan dalam tabel dengan bidang-bidang yang telah didefinisikan sebelumnya, sebagaimana umumnya sistem manajemen database berbasis SQL, mendukung penggunaan kueri yang fleksibel dan dinamis, ketika beragam tipe kueri mungkin tidak dikenali secara a priori. Contoh jelas datastore terstruktur adalah IndexedDB di browser.
Kunci/Nilai: Datastore Kunci/Nilai dan database NoSQL terkait, menawarkan kemampuan menyimpan dan mengambil data tidak terstruktur yang diindeks dengan kunci unik. Datastore Kunci/Nilai seperti tabel hash karena memungkinkan akses waktu-konstanta ke data kabur yang telah diindeks. Contoh menonjol datastore kunci/nilai adalah Cache API di browser dan Apache Cassandra di server.
Aliran Byte: Model sederhana ini menyimpan data sebagai string byte kabur dengan panjang bervariasi yang menyerahkan segala bentuk pengorganisasian internal ke layer aplikasi. Model ini terutama bagus untuk sistem file dan blob data lainnya yang tersusun secara hierarkis. Contoh menonjol dari datastore aliran byte antara lain sistem file dan layanan cloud storage.
Persistensi
Metode storage untuk aplikasi web bisa dianalisis sesuai dengan cakupan persistensi yang dibuat untuk data.
**Persistensi Sesi: **Data dalam kategori ini hanya disimpan selama sesi web tunggal atau selama tab browser masih aktif. Contoh mekanisme storage dengan persistensi sesi adalah Session Storage API.
Persistensi Perangkat: Data dalam kategori ini dipertahankan di semua sesi dan tab/jendela browser, dalam perangkat tertentu. Contoh mekanisme storage dengan persistensi perangkat adalah Cache API.
Persistensi Global: Data dalam kategori ini dipertahankan di semua sesi dan perangkat. Dengan demikian, inilah bentuk persistensi data yang paling sempurna. Contoh mekanisme storage dengan persistensi global adalah Google Cloud Storage.
Dukungan Browser
Developer harus memilih API yang paling cocok dengan domain masalah mereka; akan tetapi, mereka juga harus memperhitungkan kenyataan bahwa API yang telah distandardisasi dan sudah mapan lebih disukai pada antarmuka khusus atau kepemilikan, karena cenderung bertahan lebih lama dan didukung lebih luas. Mereka juga memperoleh basis pengetahuan yang lebih luas dan ekosistem developer yang lebih kaya.
Transaksi
Sering kali, suatu kumpulan operasi storage yang berkaitan dengan harus berhasil atau gagal secara atomik. Sistem manajemen database umumnya mendukung fitur ini dengan menggunakan model transaksi, di mana pembaruan yang berkaitan dapat dikelompokkan ke dalam unit-unit arbitrer. Walaupun tidak selalu diperlukan, ini adala fitur yang praktis, dan kadang-kadang esensial, di beberapa domain masalah.
Sinkron/Asinkron
Sebagian API storage bersifat sinkronus dalam artian bahwa permintaan storage atau pengambilan memblokir thread yang saat ini aktif hingga permintaan diselesaikan. Hal ini sangat memberatkan di browser web, karena permintaan storage menggunakan thread utama bersama UI. Karena alasan efisiensi dan kinerja, API storage asinkronus lebih disukai.
Perbandingan
Di bagian ini, kita mengamati API yang saat ini tersedia untuk para developer web dan membandingkannya dengan berbagai dimensi yang dijelaskan di atas.
Seperti disebutkan di atas, sebaiknya pilih API yang didukung luas di sebanyak mungkin browser dan yang menawarkan model panggilan asinkronus, untuk memaksimalkan interoperabilitas dengan UI. Kriteria ini dengan sendirinya membawa pada pilihan teknologi berikut:
Untuk kunci/nilai lokal perangkat, gunakan Cache API.
Untuk storage terstruktur lokal perangkat: gunakan IndexedDB.
Untuk storage aliran byte global: gunakan layanan Cloud Storage.
Kombinasi ini memenuhi kebutuhan storage dasar bagi banyak aplikasi web seluler. Nantikan artikel mendatang yang akan membahas cara menangani pola storage umum secara detail, bersama contoh kode penyerta.
Periksalah dokumentasi berikut untuk mengetahui selengkapnya tentang penggunaan Chrome DevTools untuk memeriksa dan men-debug API web storage yang Anda pilih. API yang tidak disebutkan di sini berarti tidak didukung di DevTools atau tidak berlaku.
- Local Storage
- Session Storage
- Cookie
- Web SQL
- Cache
- IndexedDB
Jika Anda menggunakan beberapa API storage, periksalah fitur Clear Storage dari DevTools. Fitur ini memungkinkan Anda mengosongkan beberapa storage sekaligus dengan sekali klik tombol. Lihat Kosongkan service worker, storage, database, dan cache untuk informasi selengkapnya.
Berikutnya ke mana…
Karena kini telah mengulas sebagian cara pikir yang relevan tentang mekanisme storage dan membandingkan API yang paling populer dan layanan yang tersedia saat ini, tidak lama lagi kami akan menambahkan materi lebih banyak untuk lebih mendalami satu atau beberapa topik perhatian:
Saran Storage Offline untuk Progressive Web App
Pola Storage Umum [segera hadir]
Metode Storage Back-End yang Disarankan [segera hadir]
Mendalami: IndexedDB [segera hadir]
Mendalami: Cache API [segera hadir]
Analisis Kerangka Kerja Storage Populer [segera hadir]