Kuki, Storan tempatan dan Storan Sesi

Ini ialah siaran #6 siri Soalan Temuduga Frontend. Jika anda ingin meningkatkan tahap persediaan anda atau kekal dikemas kini secara umum, pertimbangkan untuk mendaftar di Frontend Camp.

---

Kuki, Storan Tempatan dan Storan Sesi semuanya digunakan untuk menyimpan data di sisi pelanggan. Mekanisme ini amat berguna untuk menyimpan token pengesahan atau keadaan klien sahaja, seperti tema atau tetapan diperibadikan. Ketiga-tiga jenis storan berkongsi ciri berikut:

1. Mereka menyimpan data sebagai pasangan nilai kunci.
2. Semua nilai disimpan dalam format rentetan. Jika nilai bukan rentetan, ia disiri sebelum disimpan.
3. Data yang disimpan dalam mekanisme ini boleh diakses oleh pelanggan (kecuali kuki HttpOnly).

biskut

Kuki tidak boleh menyimpan sejumlah besar data; storan mereka dihadkan pada kira-kira 4KB setiap domain. Had ini wujud kerana kuki dihantar secara automatik ke pelayan dengan setiap permintaan yang dibuat oleh penyemak imbas. Menyimpan data sebelah pelanggan yang berlebihan dalam kuki akan meningkatkan saiz muatan, memberi kesan negatif kepada prestasi.

Apakah jenis data yang harus kami simpan dalam Kuki?
Kuki sesuai untuk menyimpan data yang perlu dihantar ke pelayan, seperti token pengesahan, ID sesi, ID analitik dan maklumat yang serupa. Selain itu, kuki membenarkan perkongsian data merentas tab atau tetingkap yang berbeza bagi domain atau subdomain yang sama.

Anda boleh mengkonfigurasi kuki menggunakan pelbagai bendera untuk mengubah suai tingkah lakunya atau menguatkuasakan keselamatan:

• HttpOnly memastikan kuki tidak boleh diakses melalui JavaScript pada sisi pelanggan, mengurangkan risiko serangan XSS.
• maxAge/expires menyatakan tarikh luput untuk kuki. Jika tiada tarikh luput ditetapkan, kuki akan dipadamkan apabila penyemak imbas ditutup.

Ingin mengetahui lebih lanjut tentang bendera kuki? Lihat siaran LinkedIn saya.

Tidak seperti storan tempatan dan storan sesi, kuki juga boleh ditetapkan (baca: "ditambah") oleh pelayan menggunakan pengepala Set-Cookie.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Storan tempatan

Tidak seperti kuki, localStorage menawarkan kapasiti storan yang jauh lebih besar iaitu kira-kira 5MB setiap domain. Ini kerana localStorage direka untuk menyimpan data jangka panjang. Ia mengekalkan data walaupun semasa penyemak imbas ditutup, menjadikannya sesuai untuk keperluan storan sisi pelanggan yang berterusan.

Apakah jenis data yang perlu kami simpan dalam localStorage kemudian?
localStorage paling sesuai untuk menyimpan data yang digunakan hanya pada sisi klien dan tidak perlu dihantar ke pelayan dengan setiap permintaan. Beberapa contoh ialah tema tapak web atau produk yang ditambahkan dalam troli sebelum yang digunakan telah dilog masuk.

Data yang disimpan dalam localStorage kekal selama-lamanya sehingga pengguna memadamkannya secara manual atau tapak web mengosongkannya menggunakan JavaScript.

Sama seperti kuki, data dalam localStorage boleh diakses merentas semua tab atau tetingkap dari asal yang sama, menjadikannya berguna untuk berkongsi keadaan pihak klien dalam domain.

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

Storan sesi

sessionStorage digunakan untuk menyimpan data sisi pelanggan jangka pendek. Seperti localStorage, ia menyediakan kapasiti storan sekitar 5MB setiap domain dan berkongsi API yang sama.

Walaupun kedua-dua sessionStorage dan localStorage berkongsi fungsi yang sama, ia berbeza dalam dua aspek utama: Kegigihan data dan Kebolehaksesan.
Tidak seperti localStorage, sessionStorage tidak menyimpan data sebaik sahaja tab atau penyemak imbas ditutup. Selain itu, data yang disimpan dalam sessionStorage diasingkan ke tab atau tetingkap tertentu tempat ia dicipta, bermakna tab atau tetingkap lain dari asal yang sama tidak boleh mengaksesnya.

Apakah kes penggunaan untuk sessionStorage kemudian?
sessionStorage sesuai untuk menyimpan data yang diperlukan hanya untuk satu sesi. Sebagai contoh, pertimbangkan pengguna mengisi borang panjang yang memuat semula halaman secara tidak sengaja. Jika data borang disimpan dalam sessionStorage, ia akan berterusan melalui muat semula, membolehkan pengguna meneruskan tanpa kehilangan kemajuan mereka.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa data ini tidak akan dapat diakses dalam tab lain atau setelah tab ditutup.

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

Walaupun kuki disertakan secara automatik dalam setiap permintaan yang dihantar oleh penyemak imbas, data yang disimpan dalam localStorage atau sessionStorage boleh dihantar secara manual ke pelayan dengan menulis kod tersuai.

---

Ringkasan

1. Kuki, localStorage dan sessionStorage digunakan untuk menyimpan data di sisi pelanggan.
2. Kuki ialah satu-satunya bentuk storan yang boleh ditetapkan oleh pelayan juga menggunakan pengepala respons Set-Cookie.
3. Kuki dihantar secara automatik ke pelayan dengan setiap permintaan.
4. localStorage dan sessionStorage mempunyai storan yang ketara besar(5MB) berbanding kuki(4KB). Kedua-dua storan ini berkongsi antara muka API yang sama.
5. Kuki mempunyai tarikh luput, jika tidak, ia akan dikosongkan apabila penyemak imbas ditutup.
6. data localStorage kekal selama-lamanya melainkan dibersihkan secara manual oleh pengguna atau tapak web itu sendiri.
7. Data sessionStorage dikosongkan selepas sesi tamat iaitu apabila tab atau tetingkap ditutup.

---

Suka dengan apa yang baru anda baca? Pertimbangkan untuk melihat Kem Frontend ✌️

Atas ialah kandungan terperinci Kuki, Storan tempatan dan Storan Sesi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!