Bagaimana untuk melakukan storan tempatan dalam Vue?

Vue ialah rangka kerja JavaScript bahagian hadapan yang popular yang menyediakan banyak ciri mudah, termasuk storan tempatan. Storan tempatan merujuk kepada menyimpan data dalam penyemak imbas pengguna supaya ia mudah diambil dan digunakan pada lawatan berikutnya. Artikel ini akan memperkenalkan cara melaksanakan storan tempatan dalam Vue.

Vue menyediakan pelbagai pilihan storan tempatan, termasuk kuki, localStorage dan sessionStorage. Pilihan ini mempunyai kegunaan dan had yang berbeza, dan ia perlu dipilih berdasarkan keperluan khusus apabila menggunakannya.

1. Gunakan kuki untuk storan setempat

Kuki ialah fail teks kecil yang disimpan pada komputer pengguna. Ia boleh digunakan untuk menyimpan maklumat asas seperti pilihan pengguna atau kandungan troli beli-belah. Vue menyediakan pemalam vue-cookies yang memudahkan penggunaan kuki untuk menyimpan dan mendapatkan data.

Pertama, anda perlu memasang pemalam vue-cookies dalam projek Vue. Anda boleh menggunakan arahan npm untuk memasang:

npm install vue-cookies --save

Selepas pemasangan selesai, perkenalkan pemalam vue-cookies ke dalam contoh Vue:

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

Kini anda boleh menggunakan objek $cookies untuk penyimpanan kuki. Berikut ialah contoh:

// 存储数据
this.$cookies.set('key', 'value', 1)

// 检索数据
this.$cookies.get('key')

2. Gunakan localStorage untuk storan setempat

localStorage ialah API yang menyimpan data dalam penyemak imbas pengguna, yang boleh digunakan apabila pengguna menutup data pelayar masih dikekalkan. Vue menyediakan objek global $localStorage yang boleh digunakan untuk menyimpan dan mendapatkan semula data.

Berikut ialah contoh:

// 存储数据
this.$localStorage.set('key', 'value')

// 检索数据
this.$localStorage.get('key')

localStorage boleh menyimpan saiz data yang lebih besar, tetapi setiap nama domain hanya boleh menyimpan 5MB data. Oleh itu, berhati-hati harus diambil untuk tidak melebihi had apabila menyimpan sejumlah besar data.

3. Gunakan sessionStorage untuk storan setempat

sessionStorage adalah serupa dengan localStorage Ia adalah API yang menyimpan data dalam penyemak imbas pengguna pengguna menutup pelayar akan dipadamkan selepas pelayan dipasang. Vue menyediakan objek global $sessionStorage, yang boleh digunakan untuk menyimpan dan mendapatkan semula data.

Berikut ialah contoh:

// 存储数据
this.$sessionStorage.set('key', 'value')

// 检索数据
this.$sessionStorage.get('key')

sessionStorage juga boleh menyimpan saiz data yang lebih besar, tetapi setiap nama domain hanya boleh menyimpan 5MB data. Oleh itu, berhati-hati harus diambil untuk tidak melebihi had apabila menyimpan sejumlah besar data.

Ringkasan

Vue menyediakan pelbagai pilihan storan tempatan, termasuk kuki, localStorage dan sessionStorage, yang boleh dipilih mengikut keperluan khusus. Apabila menggunakan, anda harus memberi perhatian kepada saiz data dan had yang boleh disimpan oleh setiap pilihan, dan gunakannya dengan bijak untuk mengelak daripada melebihi had. Storan tempatan boleh dilakukan dengan mudah dengan menggunakan objek global $cookies, $localStorage dan $sessionStorage yang disediakan oleh Vue.

Atas ialah kandungan terperinci Bagaimana untuk melakukan storan tempatan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!