Rumah >hujung hadapan web >html tutorial >Pelajari kemahiran penyimpanan data: kuasai cara menggunakan sessionstorage

Pelajari kemahiran penyimpanan data: kuasai cara menggunakan sessionstorage

王林
王林asal
2024-01-11 12:18:47987semak imbas

Pelajari kemahiran penyimpanan data: kuasai cara menggunakan sessionstorage

Cara menggunakan SessionStorage: Kuasai kemahiran penyimpanan data dengan cepat

SessionStorage ialah API Web untuk menyimpan data sementara dalam penyemak imbas. Ia menyediakan cara yang mudah dan mudah untuk kami menyimpan data dalam penyemak imbas semasa sesi pengguna. Artikel ini akan memperkenalkan cara menggunakan SessionStorage dan menyediakan contoh kod khusus untuk membantu pembaca menguasai teknik penyimpanan data dengan cepat.

1. Konsep asas dan penggunaan SessionStorage

SessionStorage ialah teknologi storan sisi Pelanggan baharu dalam standard HTML5, yang boleh menyimpan data dalam penyemak imbas pelanggan. Sama seperti LocalStorage, SessionStorage juga menyimpan data dalam bentuk "pasangan nilai kunci". Perbezaannya ialah data yang disimpan dalam SessionStorage hanya sah semasa sesi semasa Setelah sesi tamat atau penyemak imbas ditutup, data akan dikosongkan.

Tujuan utama SessionStorage adalah untuk berkongsi data antara halaman yang berbeza. Contohnya, dalam tapak web beli-belah, kita boleh menggunakan SessionStorage untuk menyimpan maklumat produk yang dipilih oleh pengguna, dan kemudian membaca maklumat ini pada halaman pembayaran. Selain itu, SessionStorage juga boleh digunakan untuk menyimpan status log masuk pengguna, komunikasi antara halaman, dsb.

2. Langkah untuk menggunakan SessionStorage

  1. Menyimpan data
    Untuk menyimpan data dalam SessionStorage, kita boleh menggunakan kaedah setItem(). Kaedah setItem() menerima dua parameter Parameter pertama ialah nama kunci data yang akan disimpan, dan parameter kedua ialah nilai data yang akan disimpan.
SessionStorage.setItem('username', '张三');
  1. Dapatkan data
    Untuk mendapatkan data yang disimpan dalam SessionStorage, kita boleh menggunakan kaedah getItem(). Kaedah getItem() menerima satu parameter, iaitu nama kunci data yang akan diperolehi.
let username = SessionStorage.getItem('username');
console.log(username); // 输出:张三
  1. Padam data
    Untuk memadam data dalam SessionStorage, kita boleh menggunakan kaedah removeItem(). Kaedah removeItem() menerima satu parameter, iaitu nama kunci data yang akan dipadamkan.
SessionStorage.removeItem('username');
  1. Kosongkan semua data
    Untuk mengosongkan semua data dalam SessionStorage, kita boleh menggunakan kaedah clear().
SessionStorage.clear();

3. Penyimpanan objek dan tatasusunan

SessionStorage hanya boleh menyimpan data jenis rentetan, tetapi tidak boleh menyimpan objek atau tatasusunan secara langsung. Tetapi kita boleh menggunakan kaedah JSON.stringify() untuk menukar objek atau tatasusunan kepada rentetan untuk penyimpanan, dan kemudian gunakan kaedah JSON.parse() untuk menukar rentetan kembali kepada objek atau tatasusunan.

Sebagai contoh, simpan objek:

let user = {
  name: '李四',
  age: 25
};
SessionStorage.setItem('user', JSON.stringify(user));

Kemudian dapatkan objek:

let userStr = SessionStorage.getItem('user');
let user = JSON.parse(userStr);
console.log(user.name); // 输出:李四
console.log(user.age); // 输出:25

IV Had dan pertimbangan SessionStorage

Walaupun SessionStorage menyediakan kaedah penyimpanan dan akses data yang mudah, terdapat juga beberapa batasan dan keperluan Perkara yang perlu diambil perhatian.

  1. SessionStorage mempunyai saiz storan data yang terhad, dan had saiz setiap penyemak imbas mungkin berbeza, biasanya sekitar 5MB.
  2. SessionStorage antara tetingkap (atau tab) penyemak imbas yang berbeza adalah bebas dan data tidak boleh dikongsi.
  3. Data disimpan dalam penyemak imbas pelanggan dan mungkin dicabar oleh beberapa isu keselamatan, jadi adalah tidak selamat untuk menyimpan maklumat sensitif.
  4. Data dalam SessionStorage boleh dikongsi antara halaman yang berbeza di bawah nama domain yang sama, tetapi halaman antara nama domain yang berbeza tidak boleh dikongsi.

Ringkasan:

SessionStorage ialah teknik storan data yang ringkas dan mudah digunakan yang boleh menyimpan data sementara dalam penyemak imbas dengan mudah. Artikel ini memperkenalkan konsep asas dan penggunaan SessionStorage dan menyediakan contoh kod khusus untuk membantu pembaca menguasai cara menggunakan SessionStorage. Ia juga memperkenalkan kaedah untuk menyimpan objek dan tatasusunan, serta had dan pertimbangan SessionStorage. Saya berharap pembaca dapat menggunakan SessionStorage dengan lebih baik untuk penyimpanan data melalui panduan artikel ini.

Atas ialah kandungan terperinci Pelajari kemahiran penyimpanan data: kuasai cara menggunakan sessionstorage. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn