Solusi penyimpanan data front-end umum terutama meliputi:Cookie、Penyimpanan Web、IndexedDB、WebSQL、Penyimpanan Lokal、Penyimpanan Sesidll., misalnya:
| sifat | kue | Penyimpanan lokal | sessionStorage | DB yang diindeks | | Siklus hidup data | Umumnya dihasilkan oleh server, waktu kedaluwarsa dapat diatur; Komponen seperti adopsi front-end dan js-cookie juga dapat dihasilkan | Kecuali dibersihkan, itu selalu ada; Saat browser ditutup, browser juga disimpan secara lokal, tetapi cross-browser tidak didukung | Membersihkan dan menyegarkan halaman akan tetap ada saat halaman ditutup, dan interaksi lintas halaman tidak didukung | Kecuali dibersihkan, itu selalu ada | | Ukuran penyimpanan data | 4K | 5 juta | 5 juta | Tidak ada batasan ukuran | | Berkomunikasi dengan server | Itu dibawa di header yang diminta setiap saat, yang berdampak pada kinerja permintaan; Pada saat yang sama, karena disertakan dalam permintaan, ia juga rentan terhadap masalah keamanan | Tidak berpartisipasi | Tidak berpartisipasi | Tidak berpartisipasi | | Keganjilan | Pasangan kunci-nilai string menyimpan data secara lokal | Pasangan kunci-nilai string menyimpan data secara lokal | Pasangan kunci-nilai string menyimpan data secara lokal | IndexedDB adalah database non-relasional (operasi melalui pernyataan SQL tidak didukung). Ini dapat menyimpan data dalam jumlah besar, menyediakan antarmuka untuk kueri, dan membangun indeks, yang tidak dapat disediakan oleh solusi penyimpanan lain. |
IndexedDB
Artikel ini terutama menjelaskan penggunaan IndexedDB untuk penyimpanan front-end, dan diperkenalkan sebagai berikut:
IndexedDB adalah API yang mendasari untuk menyimpan data terstruktur dalam jumlah besar (juga objek besar file/biner (blob)) di sisi klien. API menggunakan indeks untuk memungkinkan pencarian data berperforma tinggi. Meskipun Penyimpanan Web berguna untuk menyimpan data dalam jumlah yang lebih kecil, itu tidak sebaik menyimpan data terstruktur dalam jumlah yang lebih besar. IndexedDB memberikan solusi untuk skenario ini. Halaman ini adalah halaman panduan utama untuk MDN IndexedDB - di sini, kami menyediakan referensi API lengkap dan panduan penggunaan, detail dukungan browser, dan tautan ke beberapa penjelasan konsep utama.
IndexedDB memiliki fitur berikut:
(1) Penyimpanan pasangan nilai kunci. IndexedDB menggunakan penyimpanan objek untuk menyimpan data. Semua jenis data dapat disimpan secara langsung, termasuk objek JavaScript. Dalam repositori objek, data disimpan dalam bentuk "pasangan nilai kunci", dan setiap catatan data memiliki kunci primer yang sesuai, yang unik dan tidak dapat diduplikasi, jika tidak, kesalahan akan dilemparkan.
(2) Asinkron. IndexedDB tidak mengunci browser dan pengguna masih dapat melakukan operasi lain, berbeda dengan LocalStorage, yang beroperasi secara sinkron. Desain asinkron adalah untuk mencegah sejumlah besar data dibaca dan ditulis, memperlambat kinerja halaman web.
(3) Urusan dukungan. IndexedDB mendukung transaksi, yang berarti bahwa jika salah satu langkah operasi gagal, seluruh transaksi akan dibatalkan, dan database akan digulirkan kembali ke status sebelum transaksi terjadi, dan tidak ada kasus penulisan ulang hanya sebagian dari data.
(4) Pembatasan homologi. IndexedDB tunduk pada batas asal yang sama, dan setiap database sesuai dengan nama domain yang membuatnya. Halaman web hanya dapat mengakses database dengan nama domain mereka sendiri, bukan database lintas domain.
(5) Ruang penyimpanan besar. IndexedDB memiliki ruang penyimpanan yang jauh lebih besar daripada LocalStorage, umumnya tidak kurang dari 250MB, dan tidak ada batas atas.
(6) Mendukung penyimpanan biner. IndexedDB tidak hanya dapat menyimpan string tetapi juga data biner (objek ArrayBuffer dan objek Blob).
Jika sulit untuk memulai langsung dengan IndexedDB dan Anda perlu merangkum sendiri, Anda dapat menggunakan beberapa paket paket, sebagai berikut:
- localForage: Polyfill sederhana yang menyediakan sintaks nilai sederhana untuk penyimpanan data sisi klien. Ini menggunakan IndexedDB di latar belakang dan kembali ke WebSQL atau localStorage di browser yang tidak mendukung IndexedDB.
- Dexie.js: Pembungkus IndexedDB memungkinkan pengembangan kode yang lebih cepat melalui sintaks sederhana.
- ZangoDB: Antarmuka IndexedDB yang mirip dengan MongoDB, mendukung sebagian besar fungsi pemfilteran, proyeksi, penyortiran, pembaruan, dan agregasi MongoDB yang sudah dikenal.
- JsStore: Pembungkus IndexedDB dengan sintaks SQL.
- MiniMongo: MongoDB dalam memori klien yang didukung oleh penyimpanan lokal, sinkronisasi server melalui http. MeteorJS menggunakan MiniMongo.
- PouchDB: Klien yang mengimplementasikan CouchDB di browser menggunakan IndexedDB.
- idb: Pustaka kecil (〜1.15k) dengan sebagian besar API yang mirip dengan IndexedDB, tetapi dengan beberapa peningkatan kecil yang sangat meningkatkan kegunaan database.
- idb-keyval: Penyimpanan pasangan kunci-nilai berbasis janji super sederhana dan kecil (~600B) yang diimplementasikan dengan IndexedDB.
- sifrr-storage: Database nilai kunci sisi klien berbasis janji yang sangat kecil (~2kB). Diimplementasikan berdasarkan IndexedDB, localStorage, WebSQL, dan Cookie. Itu dapat secara otomatis memilih database yang didukung yang disebutkan di atas dan menggunakannya dalam urutan prioritas.
- lovefield: Lovefield adalah database relasional untuk aplikasi web, ditulis dalam JavaScript, dapat berjalan di lingkungan browser yang berbeda, dan menyediakan API seperti SQL yang cepat, aman, dan mudah digunakan.
lokalHijauan
localForage adalah repositori JavaScript yang cepat dan sederhana. localForage meningkatkan pengalaman offline aplikasi web dengan menggunakan penyimpanan asinkron (IndexedDB atau WebSQL) dan API sederhana yang mirip dengan localStorage. localForage menggunakan localStorage di browser yang tidak memiliki dukungan IndexedDB atau WebSQL.
Alamat GitHub:Login hyperlink terlihat.
Tutorial Bahasa Mandarin:Login hyperlink terlihat.
localForage menyediakan dua file js yang berbeda, perbedaannya adalah sebagai berikut:
localforage.js: library Promise yang berisi implementasi lie (Login hyperlink terlihat.), filenya relatif besar, dan sintaks janji dapat digunakan di browser lama.
localforage.nopromises.js: Tidak ada implementasi Promise, hanya versi browser baru yang didukung.
Kode pengujian:
(Akhir)
|
Diposting pada 12/10/2023 20.42.27
|
|
|
|
Tuan tanah|
Diposting pada 02/03/2025 19.12.18
|
