Bagaimana cara menggunakan LocalStorage dan sessionStorage?

LocalStorage digunakan untuk menyimpan data untuk masa yang lama, dan sessionStorage digunakan untuk menyimpan sementara semasa sesi. 1. Kedua -dua menggunakan setItem () dan getItem () untuk mengakses data, tetapi hanya boleh menyimpan rentetan. Objek atau tatasusunan perlu ditukar melalui json.stringify () sebelum penyimpanan. 2. Anda boleh memadam satu item melalui penyingkiran () dan jelas () untuk membersihkan semua data, terutamanya untuk localStorages yang tidak akan luput secara automatik. 3. LocalStorage sesuai untuk menyimpan data jangka panjang seperti keutamaan pengguna, dan sessionStorage sesuai untuk menyimpan data sementara seperti kemajuan bentuk. 4. Perhatikan isu -isu keselamatan seperti batasan kapasiti (kira -kira 5MB), dasar homolog, operasi segerak boleh menjejaskan prestasi dan ketidakupayaan untuk menyimpan maklumat sensitif semasa digunakan.

Penyimpanan tempatan adalah ciri yang sangat praktikal dalam pembangunan front-end, yang membolehkan kami menyimpan data dalam penyemak imbas. localStorage dan sessionStorage adalah dua API penyimpanan web yang biasa digunakan. Mereka tidak sukar digunakan, tetapi beberapa butiran masih perlu diberi perhatian.

Ringkasnya: Jika anda mahu data disimpan sehingga ia dibersihkan secara manual, gunakan localStorage ; Jika anda hanya mahu menggunakannya semasa sesi semasa, tutup halaman dan jelaskannya, pilih sessionStorage .

1. Penggunaan Asas: Simpan dan Ambil

Sama ada localStorage atau sessionStorage , kaedah operasi hampir sama. Kaedah yang paling biasa digunakan ialah setItem() dan getItem() :

 // Data Store localStorage.setItem ('nama pengguna', 'john_doe');
sessionStorage.setItem ('token', 'abc123');

// Dapatkan data const user = localStorage.getItem ('nama pengguna');
const token = sessionStorage.getItem ('token');

Harus diingat bahawa hanya rentetan yang dapat disimpan . Jika anda ingin menyimpan objek atau tatasusunan, anda perlu menggunakan JSON.stringify() untuk menukarnya terlebih dahulu:

 const user = {name: 'Alice', umur: 25};
localStorage.setItem ('user', json.stringify (user));

// menghuraikannya kembali apabila mengambil const const storedUser = json.parse (localStorage.getItem ('user'));

2. Padam dan membersihkan data

Kadang -kadang anda mungkin mahu memadam beberapa data secara aktif atau membersihkan semuanya. Anda boleh menggunakan kaedah berikut:

• Padam item:

   localStorage.removeItem ('nama pengguna');
  sessionStorage.removeItem ('token');

• Kosongkan semua data:

   localStorage.clear ();
  sessionStorage.clear ();

  Ini amat penting untuk localStorage kerana ia tidak akan luput secara automatik, dan jika tidak jelas, data akan sentiasa berada di sana.

  ---

  3. Perbezaan dalam senario penggunaan

  Walaupun API kedua -duanya adalah sama, senario yang berkenaan agak berbeza:

  • localStorage lebih sesuai untuk pemeliharaan jangka panjang keutamaan pengguna, tetapan tema, status log masuk, dan lain-lain sebagai contoh, ingat mod gelap yang dipilih oleh pengguna kali terakhir, dan anda masih boleh mengingatnya apabila anda membuka laman web pada masa akan datang.

  • sessionStorage lebih sesuai untuk data sementara, seperti menyegarkan halaman dalam borang dan tidak mahu pengguna refil, atau merakam status halaman semasa, dan secara automatik melepaskan sumber selepas menutup tab.

  Sebagai contoh: anda sedang menjalankan sistem peperiksaan dalam talian. Apabila pengguna menjawab separuh jalan melalui jawapan, anda boleh menyimpan kemajuan menjawab dengan sessionStorage supaya data tidak akan hilang walaupun penyegaran disegarkan.

  ---

  4. Langkah berjaga -jaga dan batasan

  Walaupun kedua -dua alat ini sangat berguna, terdapat beberapa batasan dan langkah berjaga -jaga:

  • Had kapasiti : Biasanya terdapat kira -kira 5MB ruang di bawah setiap nama domain (pelayar yang berbeza mungkin berbeza), dan tidak boleh digunakan untuk menyimpan sejumlah besar data seperti gambar atau fail.

  • Dasar asal yang sama : Hanya halaman dengan protokol yang sama, nama domain yang sama, dan port yang sama boleh mengakses data yang sama. Sebagai contoh, http://example.com dan https://example.com adalah berbeza.

  • Operasi segerak : Baca dan tulis operasi adalah segerak, dan jumlah operasi yang kerap dan besar boleh menjejaskan prestasi, terutama pada mudah alih.

  • Isu Keselamatan : Jangan terus menyimpan maklumat sensitif (seperti kata laluan) di sini, kerana ia adalah teks biasa dan mudah dicuri oleh serangan XSS.

  ---

  Pada dasarnya itu sahaja. Menggunakan localStorage dan sessionStorage boleh membuat pengalaman laman web anda lebih lancar, tetapi jangan lupa untuk mengawal jumlah data dan memberi perhatian kepada keselamatan.

  Atas ialah kandungan terperinci Bagaimana cara menggunakan LocalStorage dan sessionStorage?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!