senario untuk penyimpanan dan operasi data penyemak imbas termasuk:
Sebelum melayari pilihan ini, lihatlah dengan cepat kegigihan data ...
mata utama
Data tetap boleh disekat atau dipadam oleh pengguna, sistem operasi, pelayar, atau pemalam pada bila-bila masa. Apabila penyemak imbas mendekati kapasiti yang diperuntukkan kepada jenis penyimpanan itu, ia mungkin memutuskan untuk memadam item yang lebih tua atau lebih besar.
Penyemak imbas juga akan merakam status halaman. Anda boleh meninggalkan dari navigasi laman web dan klik kembali atau tutup dan membuka semula tab; Pembolehubah dan data yang dianggap sesi hanya tersedia.
metrik
arahan kapasiti tidak terhad, tetapi apabila anda mengisi ingatan, penyemak imbas mungkin melambatkan atau merosakkan kelajuan baca/tulis adalah kelajuan Pilihan yang paling cepat mempunyai kegigihan yang buruk: Data akan disegarkan oleh penyemak imbas dan dibersihkan untuk menyimpan Negeri dalam pembolehubah JavaScript adalah pilihan terpantas dan paling mudah. Saya percaya anda tidak memerlukan contoh, tetapi ...
const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
};Mudah digunakan
rapuh: menyegarkan atau menutup tab akan membersihkan segala -galanya
petunjuk disegarkan oleh skrip lain atau penjelasan yang disegarkan kebanyakan elemen DOM (pada halaman atau dalam memori) boleh menyimpan nilai -nilai dalam sifat bernama. Lebih selamat menggunakan nama atribut yang diawali dengan data-:
// 定位<main>元素
</main>const main = document.querySelector('main');
// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });
// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1dom cepat! (Bertentangan dengan pendapat popular)
skrip pihak ketiga boleh menyemak atau menimpa nilai
penyimpanan atau kemas kini item bernama menggunakan .setItem ():
Dapatkan mereka menggunakan .getItem ():
Menukar sebarang nilai akan meningkatkan acara penyimpanan di tab pelayar/tingkap lain yang disambungkan ke domain yang sama. Permohonan anda boleh bertindak balas dengan sewajarnya:
const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
}; Pro:
Petunjuk Arahan Kapasiti bergantung kepada peralatan. Sekurang-kurangnya 1GB, tetapi sehingga 60% ruang cakera yang tersisa membaca/menulis kelajuan data ketekunan cepat tetap sehingga ia dibersihkan indexedDB menyediakan API peringkat rendah yang serupa dengan NoSQL untuk menyimpan sejumlah besar data. Kedai boleh diindeks, boleh dikemas kini menggunakan urus niaga, dan boleh dicari menggunakan kaedah asynchronous.
API IndexedDB adalah kompleks dan memerlukan beberapa pemprosesan acara. Fungsi berikut membuka sambungan pangkalan data apabila lulus nama, nombor versi, dan fungsi peningkatan pilihan (dipanggil apabila nombor versi berubah):
Kod berikut menyambung ke pangkalan data MyDB dan memulakan kedai objek TODO (serupa dengan jadual SQL atau koleksi MongoDB). Ia kemudian mentakrifkan kunci auto-increment yang dinamakan ID:
// 定位<main>元素
</main>const main = document.querySelector('main');
// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });
// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1Setelah sambungan DB sudah siap, anda boleh menambah item data baru dalam urus niaga:
localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));anda boleh mengambil nilai, seperti item pertama:
const state = JSON.parse( localStorage.getItem('state') );Pro:
localStorage.removeItem('state')penyimpanan data fleksibel dengan ruang maksimum
API Panggilan Kompleks dan API berasaskan Acara
Cache API
Fungsi yang sama boleh mendapatkan item dari cache. Dalam contoh ini, ia mengembalikan teks badan tindak balas: Pro:
5.5 Appcache
arahan Aplikasi web boleh membaca dan menulis dengan selamat ke sistem fail tempatan
MDN jelas menyatakan:
; path =: Jika tidak ditetapkan, kuki hanya tersedia di jalan semasa dan subpathsnya. Set; path =/ untuk membenarkan mana -mana laluan dalam domain. Fungsi di bawah menghancurkan rentetan dan menukarkannya ke dalam objek yang mengandungi pasangan nilai nama. Contohnya:
domain dan (pilihan) laluan sahaja
Elakkan menggunakan kuki melainkan tidak ada alternatif yang berdaya maju. Mudah digunakan
Chrome dan beberapa versi Safari menyokong teknologi ini, tetapi Mozilla dan Microsoft menentangnya dan sebaliknya menyokong IndexedDB.
Prestasi yang lemah Panel aplikasi dalam alat pemaju penyemak imbas (dipanggil penyimpanan di Firefox) membolehkan anda melihat, mengubah suai dan membersihkan LocalStorage, sessionstorage, indexeddb, websql, cookies, dan penyimpanan cache. Anda juga boleh menyemak data kuki yang dihantar dalam permintaan HTTP dan tajuk tindak balas dengan mengklik pada mana -mana item di panel web alat pemaju. Penyelesaian penyimpanan ini tidak sempurna, anda perlu mengadopsi pelbagai penyelesaian dalam aplikasi web yang kompleks. Ini bermakna mempelajari lebih banyak API. Tetapi ia adalah perkara yang baik untuk mempunyai pilihan dalam setiap keadaan - sudah tentu, katakan anda boleh memilih pilihan yang betul! Apabila mencari alternatif untuk penyimpanan tempatan dalam pembangunan web, pilihan seperti penyimpanan sesi, cookies, dan indexedDB boleh dipertimbangkan. Penyimpanan Sesi menyediakan penyimpanan sementara untuk sesi halaman, manakala cookies adalah kepingan kecil data yang dihantar dengan setiap permintaan HTTP yang boleh digunakan untuk pengurusan sesi dan menyimpan data terhad. IndexEdDB menyediakan penyelesaian yang lebih kuat untuk menyimpan data berstruktur di sisi klien, menjadikannya sesuai untuk aplikasi yang memerlukan pengambilan data tak segerak.
Penyelesaian penyimpanan pelayan (seperti MySQL, PostgreSQL, MongoDB) atau pangkalan data berasaskan awan (seperti Firebase, AWS DynamoDB, atau Google Cloud Firestore) mungkin lebih baik untuk penyimpanan data yang lebih luas atau apabila keselamatan dan kegigihan adalah kritikal. Di samping itu, sesetengah rangka kerja pelanggan menyediakan penyelesaian pengurusan negeri mereka sendiri, sementara pekerja perkhidmatan boleh cache data dan aset untuk fungsi luar talian, menjadikannya sesuai untuk aplikasi web progresif (PWAS). Penyimpanan tempatan adalah penyelesaian penyimpanan klien sejagat, tetapi dalam beberapa kes ia mungkin bukan pilihan yang paling sesuai. Pertama, storan tempatan tidak sesuai untuk menyimpan maklumat sensitif atau sulit kerana ia tidak mempunyai langkah penyulitan atau keselamatan yang menjadikannya terdedah kepada akses yang tidak dibenarkan. Data kritikal seperti kata laluan atau identiti peribadi harus disimpan dengan selamat di sisi pelayan menggunakan protokol keselamatan yang kuat.
Kedua, penyimpanan tempatan mempunyai kapasiti terhad, biasanya sekitar 5-10 MB setiap domain. Ia tidak sesuai untuk aplikasi yang perlu memproses sejumlah besar data. Dalam kes ini, pangkalan data pelayan atau pilihan klien yang lebih kuat seperti IndexedDB harus dipertimbangkan untuk menampung set data yang lebih besar.
Akhirnya, penyimpanan tempatan boleh menyebabkan masalah prestasi, terutamanya apabila berurusan dengan dataset yang besar, kerana ia berjalan serentak dan boleh menyekat benang utama. Untuk aplikasi kritikal prestasi, anda boleh menggunakan penyelesaian penyimpanan asynchronous seperti indexedDB atau melaksanakan caching memori untuk mengekalkan pengalaman pengguna yang lancar.
Ringkasnya, sementara storan tempatan adalah berharga untuk penyimpanan data yang ringan dan tidak sensitif, keperluan khusus projek mesti dinilai. Untuk maklumat sensitif, set data yang besar, atau aplikasi kritikal prestasi, penyelesaian penyimpanan alternatif harus diterokai untuk memastikan keselamatan data, skalabilitas, dan pengalaman pengguna yang terbaik. Pilihan LocalStorage dan sessionStorage terutamanya bergantung kepada tempoh ketekunan data yang anda perlukan dan kes penggunaan khusus anda.
LocalStorage adalah pilihan yang lebih baik apabila anda memerlukan data yang berterusan antara sesi penyemak imbas. Ia sesuai untuk menyimpan data seperti keutamaan pengguna, tetapan, atau sumber cache, yang harus dikekalkan kepada pengguna walaupun pengguna menutup penyemak imbas dan kembali ke laman web kemudian. Kegigihan dan kapasiti penyimpanan yang lebih besar menjadikannya sesuai untuk senario di mana pengekalan data jangka panjang diperlukan.
SesiStorage, sebaliknya, sesuai untuk data yang hanya tersedia semasa sesi halaman semasa. Apabila pengguna menutup tab atau penyemak imbas, data dibersihkan secara automatik, memastikan privasi dan mengurangkan risiko penyimpanan maklumat yang tidak diperlukan. Ini menjadikannya sesuai untuk menguruskan data sementara seperti data bentuk, kandungan kereta, atau pengurusan negeri dalam interaksi pengguna tunggal. Pangkalan data klien, juga dikenali sebagai pangkalan data front-end, adalah pangkalan data yang tinggal di klien aplikasi web (biasanya dalam pelayar web pengguna) dan berjalan di sana. Ia digunakan untuk menyimpan dan menguruskan data pada peranti klien, membolehkan aplikasi web berfungsi di luar talian, mengurangkan beban pelayan, dan meningkatkan pengalaman pengguna dengan meminimumkan keperluan untuk permintaan pelayan yang kerap. Pangkalan data pelanggan sering digunakan dalam pembangunan web untuk menyimpan dan mengambil data secara langsung pada peranti pengguna.
Salah satu contoh pangkalan data pelanggan yang paling biasa ialah IndexedDB, API JavaScript peringkat rendah yang menyediakan pangkalan data berstruktur untuk menyimpan sejumlah besar data dalam pelayar web. IndexEdDB membolehkan pemaju membuat, membaca, mengemas kini, dan memadam data, menjadikannya sesuai untuk aplikasi yang memerlukan penyimpanan dan pengurusan maklumat yang besar di luar talian.
Contoh-contoh lain pangkalan data pelanggan termasuk penyimpanan web (LocalStorage dan sessionStorage) untuk menyimpan sejumlah kecil data, serta pelbagai pangkalan data memori yang dilaksanakan dalam JavaScript untuk penyimpanan data sementara semasa sesi pengguna.
Pangkalan data pelanggan amat berguna untuk aplikasi web seperti Aplikasi Web Progresif (PWAS), di mana fungsi diperlukan untuk dikekalkan walaupun pengguna di luar talian atau mempunyai sambungan Internet yang terhad. Mereka melengkapkan pangkalan data pelayan dengan menyediakan mekanisme untuk menyimpan data secara tempatan pada peranti pengguna, dengan itu mengurangkan latensi dan meningkatkan pengalaman pengguna. Terdapat banyak bentuk penyimpanan pelanggan dalam pembangunan web, masing -masing dengan ciri -ciri dan kes penggunaannya sendiri.
Jenis yang biasa adalah penyimpanan web, yang termasuk LocalStorage dan sessionStorage. LocalStorage sesuai untuk menyimpan sejumlah kecil data yang perlu berterusan di sesi penyemak imbas, menjadikannya sesuai untuk keutamaan pengguna atau tetapan. Sebaliknya, SesiStorage adalah sesi-terhad, menyimpan data hanya semasa sesi satu halaman, menjadikannya sesuai untuk data sementara, seperti kandungan keranjang belanja atau data borang yang diperlukan semasa interaksi pengguna dengan laman web.
Pilihan lain ialah IndexedDB, sistem pangkalan data klien yang lebih maju. IndexEdDB menyediakan storan berstruktur untuk menguruskan sejumlah besar data pada peranti pengguna. Ia menyokong pengambilan data, pengindeksan, urus niaga, dan banyak lagi, menjadikannya sesuai untuk aplikasi yang memerlukan pemprosesan data yang kompleks dan keupayaan luar talian seperti Aplikasi Web Progresif (PWA).
Di samping itu, kuki adalah serpihan data kecil yang boleh disimpan pada peranti klien dan dihantar ke pelayan dengan setiap permintaan HTTP. Walaupun tidak sering digunakan dalam penyimpanan data umum hari ini, kuki masih boleh digunakan untuk tugas -tugas seperti pengurusan sesi, pengesahan pengguna, dan mengesan keutamaan pengguna.
Setiap jenis penyimpanan pelanggan mempunyai kebaikan dan keburukannya, dan pilihan bergantung kepada keperluan khusus anda seperti saiz data, keperluan ketekunan, dan kes penggunaan. Atas ialah kandungan terperinci 10 pilihan penyimpanan pelanggan dan bila menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP! Menyediakan penyimpanan untuk permintaan HTTP dan pasangan objek respons sehingga dua minggu kemudian di Safari. Anda boleh membuat banyak cache yang dinamakan seberapa banyak yang anda ingin menyimpan sebilangan item data rangkaian.
API ini biasanya digunakan dalam pekerja perkhidmatan untuk memberi respons rangkaian cache untuk aplikasi web progresif. Apabila peranti diputuskan dari rangkaian, aset cache boleh ditarik balik supaya aplikasi web dapat dijalankan di luar talian.
kod berikut menyimpan tindak balas rangkaian dalam cache yang dipanggil mycache: const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
};// 定位<main>元素
</main>const main = document.querySelector('main');
// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });
// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1 Menyimpan sebarang respons rangkaian
Kekurangan: tidak sesuai untuk menyimpan status aplikasi
API Cache adalah pilihan terbaik untuk menyimpan fail dan data yang diambil dari rangkaian. Anda mungkin menggunakannya untuk menyimpan keadaan aplikasi, tetapi ia tidak direka untuk tujuan ini dan terdapat pilihan yang lebih baik.
metrik Pelayar untuk membaca, menulis, mengubah suai dan memadam fail dalam sistem fail tempatan. Penyemak imbas berjalan dalam persekitaran kotak pasir, jadi pengguna mesti memberikan kebenaran kepada fail atau direktori tertentu. Ini akan mengembalikan FileSystemHandle supaya aplikasi web boleh membaca atau menulis data seperti aplikasi desktop. Pro:
Fungsi berikut menyimpan gumpalan ke fail tempatan:
localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));
API boleh berubah Pilihan penyimpanan ini paling menarik untuk saya, tetapi anda perlu menunggu beberapa tahun lagi sebelum anda boleh menggunakannya untuk pengeluaran.
Sistem fail yang boleh digunakan untuk domain yang membuat, menulis, membaca, dan memadam direktori dan fail.
Pro: Kekurangan:
tidak standard, ketidakserasian antara pelaksanaan, dan tingkah laku mungkin berubah.
Jangan gunakan ciri ini di laman web pengeluaran
Petunjuk petunjuk cookie
Ia dibersihkan atau kuki yang tamat tempoh adalah data khusus domain. Mereka dikenali untuk menjejaki reputasi orang, tetapi mereka adalah penting untuk mana -mana sistem yang perlu mengekalkan status pelayan, seperti log masuk. Tidak seperti mekanisme penyimpanan lain, kuki biasanya diluluskan di antara penyemak imbas dan pelayan dalam setiap permintaan dan tindak balas HTTP . Kedua -dua peranti boleh menyemak, mengubah suai dan memadam data kuki.
document.cookie menetapkan nilai cookie dalam klien JavaScript. Anda mesti menentukan rentetan di mana nama dan nilai dipisahkan dengan tanda yang sama (=). Contohnya: const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
};// 定位<main>元素
</main>const main = document.querySelector('main');
// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });
// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1; max-age =: Masa tamat tempoh cookie (saat) -hban contoh; max-age = 60.
localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));const state = JSON.parse( localStorage.getItem('state') );localStorage.removeItem('state')
window.name
. Name Property Sets dan mendapat nama konteks pelayaran tetingkap. Anda boleh menetapkan nilai rentetan tunggal yang berterusan antara menyegarkan penyemak imbas atau menghubungkan ke lokasi lain dan mengklik kembali. Contohnya: periksa nilai menggunakan kaedah berikut:
Pro: const
a = 1,
b = 'two',
state = {
msg: 'Hello',
name: 'Craig'
};// 定位<main>元素
</main>const main = document.querySelector('main');
// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });
// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1 Kekurangan:
halaman dalam bidang lain boleh membaca, mengubah suai atau memadam data (jangan gunakannya untuk maklumat sensitif) window.name tidak pernah direka untuk penyimpanan data. Ini adalah muslihat, dan terdapat pilihan yang lebih baik untuk
WebSQL
Petunjuk Arahan
Pro:
direka untuk penyimpanan dan akses data pelanggan yang kuat localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 })); Sokongan penyemak imbas terhad dan terdapat ralat
penyimpanan hotpot
soalan yang sering ditanya mengenai alternatif penyimpanan tempatan
Apa yang boleh saya gunakan dan bukannya penyimpanan tempatan?
Bilakah anda tidak boleh menggunakan storan tempatan?
Yang lebih baik, LocalStorage atau sessionStorage?
Apakah pangkalan data pelanggan?
Apakah jenis penyimpanan pelanggan yang berlainan?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
