Bagaimana Pelayar Menyimpan Data

Pelayar melakukan lebih daripada sekadar memaparkan laman web. Ia bertindak sebagai pengurus data tempatan. Ia menyimpan maklumat pada peranti anda untuk menjadikan pelayaran lebih pantas dan mudah.

Anda perlu tahu tiga cara utama pelayar menyimpan data:

• Kuki (Cookies) • Cache Pelayar • Storan Web (Web Storage)

Kuki Kuki adalah fail teks kecil. Laman web menggunakannya untuk mengingati anda. Ia menyimpan sesi log masuk dan tetapan bahasa anda.

Cara ia berfungsi:

  • Anda melawat sesuatu laman.
  • Laman tersebut menghantar kuki ke pelayar anda.
  • Pelayar anda menyimpannya.
  • Pada lawatan seterusnya, pelayar anda menghantar semula kuki tersebut ke pelayan.

Perlu diingat:

  • Kuki mempunyai had yang sangat kecil iaitu 4KB.
  • Ia dihantar dengan setiap permintaan, yang boleh melambatkan proses.
  • Jangan sekali-kali menyimpan kata laluan dalam kuki.

Cache Pelayar Cache menyimpan fail berat seperti imej, CSS, dan JavaScript. Matlamatnya adalah untuk kelajuan.

Cara ia berfungsi:

  • Anda melawat sesuatu laman buat kali pertama.
  • Pelayar anda memuat turun semua fail dan menyimpannya dalam cache.
  • Pada kali seterusnya anda melawat, pelayar akan memuatkan fail daripada peranti anda dan bukannya daripada internet.

Manfaat:

  • Halaman dimuatkan dengan jauh lebih pantas.
  • Ia menggunakan lebih sedikit jalur lebar internet.
  • Ia mengurangkan beban pada pelayan.

Storan Web (Web Storage) Ini adalah ciri HTML5. Ia membolehkan laman web menyimpan data sebagai pasangan kunci-nilai (key-value pairs). Ia lebih cekap daripada kuki kerana ia tidak dihantar ke pelayan dengan setiap permintaan.

Terdapat dua jenis:

  • Local Storage: Data kekal walaupun anda menutup pelayar. Ia menyimpan sekitar 5MB hingga 10MB.
  • Session Storage: Data hilang apabila anda menutup tab tersebut.

Kes penggunaan:

  • Local Storage sangat sesuai untuk tetapan mod gelap (dark mode).
  • Session Storage berfungsi dengan baik untuk data borang sementara.

Ringkasan

  • Gunakan Kuki untuk sesi log masuk dan komunikasi pelayan.
  • Gunakan Cache untuk mempercepatkan pemuatan laman dengan aset statik.
  • Gunakan Storan Web untuk jumlah data client-side yang lebih besar.

Sumber: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h