10 pilihan penyimpanan pelanggan dan bila menggunakannya

Penyimpanan dan operasi data pelayar, juga dikenali sebagai penyimpanan klien, berguna apabila data tidak diperlukan atau tidak boleh dihantar ke pelayan web.

senario untuk penyimpanan dan operasi data penyemak imbas termasuk:

Pastikan status aplikasi klien -seperti skrin semasa, data input, keutamaan pengguna, dan lain -lain.
utiliti yang mengakses data atau fail tempatan dengan keperluan privasi yang ketat.
Aplikasi Web Progresif (PWA) yang berfungsi di luar talian.

Berikut adalah sepuluh pilihan penyimpanan data penyemak imbas:

pembolehubah JavaScript
penyimpanan node dom
Penyimpanan Web (LocalStorage dan SessionStorage)
indexeddb
API cache (jangan gunakan appcache!)
API akses sistem fail
Api Kemasukan Fail dan Direktori
cookie
window.name
WebSQL

Artikel ini akan meneroka sepuluh cara yang berbeza untuk menyimpan data penyemak imbas, meliputi batasan, kebaikan dan keburukan mereka, dan penggunaan terbaik setiap teknologi.

Sebelum melayari pilihan ini, lihatlah dengan cepat kegigihan data ...

mata utama

Pembolehubah JavaScript: Data sementara adalah yang terpantas, tetapi ia akan dibersihkan apabila halaman itu disegarkan semula;
penyimpanan node dom: Sama seperti pembolehubah JavaScript dari segi kelajuan dan kegigihan, tetapi membolehkan penyimpanan negara dalam elemen HTML;
Penyimpanan Web (LocalStorage dan sessionStorage): Sesuai untuk penyimpanan yang berterusan sejumlah kecil data (localStorage) atau penyimpanan sesi (sessionStorage);
IndexedDB: Terbaik untuk sejumlah besar data berstruktur yang perlu berterusan;
API cache: Idealnya digunakan untuk menyimpan respons rangkaian dalam PWA untuk kegunaan luar talian;
Cookie: Berguna untuk data kecil yang mesti dihantar dengan permintaan HTTP;

Kegigihan data

Biasanya, data yang anda simpan akan menjadi:

1. kekal : ia akan kekal sehingga kod anda memilih untuk memadamnya, atau Volatilitas
2. : ia kekal sehingga sesi penyemak imbas berakhir, biasanya apabila pengguna menutup tab.
Keadaan sebenar lebih terperinci.

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.

1. pembolehubah JavaScript

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'
  };

Pro:

Mudah digunakan

• Quick
• tidak perlu bersiri atau deserialization
Kekurangan:

rapuh: menyegarkan atau menutup tab akan membersihkan segala -galanya

• skrip pihak ketiga boleh menyemak atau mengatasi nilai global (tetingkap)
anda sudah menggunakan pembolehubah. Anda boleh mempertimbangkan penyimpanan tetap keadaan berubah apabila Page Uninstallation.

penyimpanan node dom

2. Petunjuk

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-: Anda boleh mengakses nilai melalui atribut dataset dan bukannya kaedah yang lebih lama .SetAttribute () dan .getAttribute ().

Nilai disimpan sebagai rentetan, jadi bersiri dan deserialization mungkin diperlukan. Contohnya:
Pro:
anda boleh menentukan nilai dalam javascript atau html - contohnya

// 定位<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

membantu menyimpan keadaan komponen tertentu

dom cepat! (Bertentangan dengan pendapat popular)

• Kekurangan:
• rapuh: menyegarkan atau menutup tab akan membersihkan segala -galanya (kecuali nilai yang diberikan ke HTML oleh pelayan)
• rentetan sahaja: Serialization dan deserialization diperlukan

dom yang lebih besar akan menjejaskan prestasi

skrip pihak ketiga boleh menyemak atau menimpa nilai

Dom nodes menyimpan lebih perlahan daripada pembolehubah. Gunakannya dengan berhati -hati apabila berguna untuk menyimpan keadaan komponen dalam HTML.
Penyimpanan Web (LocalStorage dan SessionStorage)

Petunjuk petunjuk

Untuk menentukan pasangan nama/nilai. Gunakan:

3. window.localstorage menyimpan data berterusan, dan

window.SessionStorage mengekalkan data sesi sahaja manakala tab penyemak imbas tetap terbuka (tetapi lihat kegigihan data)

penyimpanan atau kemas kini item bernama menggunakan .setItem (): Dapatkan mereka menggunakan .getItem ():

Padamnya dengan .removeItem ():
2. sifat dan kaedah lain termasuk:

• .length: bilangan item yang disimpan
• .key (n): Nama kunci nth
• .clear (): Padam semua item yang disimpan

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:

Nama Mudah/Nilai pasangan API
Pilihan Penyimpanan Sesi dan berterusan
Sokongan penyemak imbas yang baik

Kekurangan:

rentetan sahaja: Serialization dan deserialization diperlukan
data tidak berstruktur tanpa urus niaga, indeks atau carian
Akses segerak mempengaruhi prestasi dataset besar

Penyimpanan Web adalah sempurna untuk nilai sementara yang lebih mudah, lebih kecil, sementara. Ia tidak begitu sesuai untuk menyimpan sejumlah besar maklumat berstruktur, tetapi anda boleh mengelakkan masalah prestasi dengan menulis data apabila halaman dipunggah.

4. indexeddb

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 ); // 1

Setelah 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

urus niaga, indeks dan pilihan carian yang kuat
Sokongan penyemak imbas yang baik
• Kekurangan:

API Panggilan Kompleks dan API berasaskan Acara

• IndexedDB adalah pilihan terbaik untuk penyimpanan data yang boleh dipercayai, tetapi anda perlu menggunakan perpustakaan pembalut seperti IDB, Dexie.js, atau JSStore.

Cache API

5. Petunjuk petunjuk

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'
  };

Fungsi yang sama boleh mendapatkan item dari cache. Dalam contoh ini, ia mengembalikan teks badan tindak balas:

// 定位<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

Pro:

Menyimpan sebarang respons rangkaian
dapat meningkatkan prestasi aplikasi web
Benarkan aplikasi web dijalankan di luar talian
API berasaskan janji moden

Kekurangan:

tidak sesuai untuk menyimpan status aplikasi
mungkin kurang berguna di luar aplikasi web progresif
Apple tidak bersahabat dengan PWA dan API CACHE

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.

5.5 Appcache

AppCache adalah pendahulu API cache yang telah tamat tempoh. Ini bukan penyelesaian penyimpanan yang anda cari. Tidak ada yang baik untuk ditonton di sini. Sila pergi.

API akses sistem fail

metrik

arahan 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. Fungsi berikut menyimpan gumpalan ke fail tempatan: Pro:

Aplikasi web boleh membaca dan menulis dengan selamat ke sistem fail tempatan

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

mengurangkan keperluan untuk memuat naik fail atau memproses data pada pelayan

Ciri hebat aplikasi web progresif

Kekurangan:
• Penyemak imbas menyokong minimum (krom sahaja)

API boleh berubah

Pilihan penyimpanan ini paling menarik untuk saya, tetapi anda perlu menunggu beberapa tahun lagi sebelum anda boleh menggunakannya untuk pengeluaran.
Api Kemasukan Fail dan Direktori

Metrik

Sistem fail yang boleh digunakan untuk domain yang membuat, menulis, membaca, dan memadam direktori dan fail.

Pro:

mungkin ada beberapa kegunaan menarik

Kekurangan: tidak standard, ketidakserasian antara pelaksanaan, dan tingkah laku mungkin berubah.

MDN jelas menyatakan:

Jangan gunakan ciri ini di laman web pengeluaran
. Ia akan mengambil masa sekurang -kurangnya beberapa tahun untuk sokongan yang luas.

8. cookie

Petunjuk petunjuk

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: Nilai tidak boleh mengandungi koma, titik koma, atau ruang, jadi encodeuricomponent () mungkin diperlukan:

Tetapan kuki lain boleh dilampirkan menggunakan pembatas titik koma, termasuk:

const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };

; domain =: Jika tidak ditetapkan, kuki hanya tersedia dalam domain URL semasa. Penggunaan; path = mysite.com membolehkan ia digunakan pada mana -mana subdomain mysite.com.

// 定位<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

; path =: Jika tidak ditetapkan, kuki hanya tersedia di jalan semasa dan subpathsnya. Set; path =/ untuk membenarkan mana -mana laluan dalam domain.

; max-age =: Masa tamat tempoh cookie (saat) -hban contoh; max-age = 60.
; expires =: Tarikh tamat tempoh cookie -contohnya; tamat = thu, 04 Julai 2021 10:34:38 ​​UTC (gunakan tarikh.toutcString () untuk pemformatan yang sesuai).
; selamat: Kuki akan dihantar melalui HTTPS sahaja.
; httponly: Membuat kuki tidak dapat mengakses JavaScript pelanggan.
; samesite =: mengawal sama ada domain lain boleh mengakses kuki. Tetapkannya ke LAX (lalai, kongsi kuki ke domain semasa), ketat (menyekat kuki awal apabila mengikuti pautan dari domain lain) atau tidak (tanpa had).
• Contoh: Tetapkan cookie status yang tamat selepas 10 minit dan boleh digunakan dalam mana -mana jalan ke domain semasa:
document.cookie Mengembalikan rentetan yang mengandungi setiap nama dan pasangan nilai, dipisahkan oleh titik koma. Contohnya:

Fungsi di bawah menghancurkan rentetan dan menukarkannya ke dalam objek yang mengandungi pasangan nilai nama. Contohnya:

localStorage.setItem('value1', 123);
localStorage.setItem('value2', 'abc');
localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

Pro:

cara yang boleh dipercayai untuk memelihara keadaan antara klien dan pelayan

const state = JSON.parse( localStorage.getItem('state') );

domain dan (pilihan) laluan sahaja

localStorage.removeItem('state')

Gunakan max-usia (saat) atau tamat tempoh (tarikh) untuk kawalan tamat tempoh automatik

digunakan secara lalai dalam sesi semasa (tetapkan tarikh tamat tempoh untuk berterusan data melebihi halaman refresh dan tab tutup)

Kekurangan:
• • kuki sering disekat oleh penyemak imbas dan plugin (mereka biasanya ditukar kepada kuki sesi supaya laman web dapat terus berfungsi)
  • pelaksanaan JavaScript yang canggung (lebih baik membuat pengendali cookie anda sendiri atau memilih perpustakaan seperti JS-Cookie)
  • rentetan sahaja (memerlukan siri dan deserialization)
  • ruang penyimpanan terhad
  • cookies boleh diperiksa oleh skrip pihak ketiga kecuali anda menyekat akses
  • Dituduh melakukan pelanggaran privasi (undang-undang serantau mungkin memerlukan anda untuk menunjukkan amaran tentang kuki yang tidak penting)
  • Data cookie dilampirkan pada setiap permintaan dan tindak balas HTTP, yang boleh menjejaskan prestasi (menyimpan data cookie 50kb dan kemudian meminta sepuluh fail 1-bait akan menghasilkan satu juta bait jalur lebar)

  Elakkan menggunakan kuki melainkan tidak ada alternatif yang berdaya maju.

  9. 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'
    };

  Mudah digunakan

  // 定位<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

  data yang tersedia untuk sesi sahaja
  Kekurangan:
  • rentetan sahaja: Serialization dan deserialization diperlukan
  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

  10. Arahan

  Kapasiti 5MB setiap domain membaca/menulis data ketekunan perlahan sehingga dibersihkan WebSQL adalah percubaan penyimpanan pangkalan data SQL seperti untuk memperkenalkan penyemak imbas. Kod Contoh:

  Chrome dan beberapa versi Safari menyokong teknologi ini, tetapi Mozilla dan Microsoft menentangnya dan sebaliknya menyokong IndexedDB. Pro: direka untuk penyimpanan dan akses data pelanggan yang kuat

  sintaks SQL biasa yang sering digunakan oleh pemaju sisi pelayan

  localStorage.setItem('value1', 123);
  localStorage.setItem('value2', 'abc');
  localStorage.setItem('state', JSON.stringify({ a:1, b:2, c:3 }));

  Kekurangan:
  Sokongan penyemak imbas terhad dan terdapat ralat
  tidak konsisten antara sintaks SQL antara pelayar
  async tetapi API berasaskan panggil balik yang canggung

  Prestasi yang lemah

  • Jangan gunakan WebSQL! Ia bukan pilihan yang berdaya maju kerana spesifikasi 2010 telah ditolak.
  • Semak storan
  • API Penyimpanan boleh menyemak ruang penyimpanan web, indexeddb, dan API cache yang tersedia. Semua pelayar kecuali Safari dan IE menyokong API berasaskan janji, yang menyediakan kaedah .estimate () untuk mengira kuota (ruang yang tersedia untuk domain) dan penggunaan (ruang yang digunakan). Contohnya:
  • Terdapat dua kaedah asynchronous lain yang tersedia:
  • .persist (): kembali benar jika tapak mempunyai kebenaran untuk menyimpan data yang berterusan,
  • .persisted (): pulangan benar jika tapak telah menyimpan data berterusan.

  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.

  penyimpanan hotpot

  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!

  soalan yang sering ditanya mengenai alternatif penyimpanan tempatan

  Apa yang boleh saya gunakan dan bukannya penyimpanan tempatan?

  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).

  Bilakah anda tidak boleh menggunakan storan tempatan?

  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.

  Yang lebih baik, LocalStorage atau sessionStorage?

  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.

  Apakah pangkalan data pelanggan?

  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.

  Apakah jenis penyimpanan pelanggan yang berlainan?

  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!