Bagaimana untuk melaksanakan storan tempatan dalam javascript

Dengan perkembangan pesat Internet, semakin banyak tapak web menggunakan reka bentuk muka hadapan, dan dengan ini keperluan untuk penyimpanan data. Secara umumnya, kami menggunakan kuki atau localStorage dalam kod bahagian hadapan untuk penyimpanan data. Artikel ini akan memperkenalkan cara melaksanakan storan tempatan dalam JavaScript.

Pertama, mari kita lihat perbezaan dan hubungan antara kuki dan localStorage. Kuki biasanya digunakan untuk menyimpan jumlah data yang lebih kecil, seperti maklumat log masuk pengguna, dsb., manakala localStorage ialah standard baharu dalam HTML5 dan digunakan untuk menyimpan jumlah data yang lebih besar, seperti tetapan setempat pengguna, maklumat konfigurasi tapak web, dsb. Pada masa yang sama, kuki mudah dirampas, tetapi localStorage lebih selamat dan boleh dipercayai, jadi kami boleh membuat pilihan yang munasabah mengikut keperluan kami.

Seterusnya, mari kita lihat cara menggunakan JavaScript untuk melaksanakan operasi localStorage.

1. Tulis data

Kami boleh menggunakan localStorage.setItem(kunci, nilai) untuk menulis data ke dan dari localStorage, dengan kunci mewakili nama kunci dan nilai mewakili nilai kunci. Berikut ialah contoh:

localStorage.setItem('name', '张三');
localStorage.setItem('age', '18');

Kod di atas akan menyimpan nilai kunci masing-masing dengan nama nama kunci dan umur dalam storan setempat.

2. Baca data

Kita boleh menggunakan localStorage.getItem(key) untuk membaca nilai kunci nama kunci yang ditentukan dalam localStorage. Berikut ialah contoh:

var name = localStorage.getItem('name');
var age = localStorage.getItem('age');
console.log(name, age);

Kod di atas akan mengeluarkan nilai utama nama dan umur masing-masing.

3. Padam data

Kami boleh menggunakan localStorage.removeItem(key) untuk memadamkan data dengan nama kunci yang ditentukan dalam localStorage. Berikut ialah contoh:

localStorage.removeItem('name');

Kod di atas akan memadamkan data dengan nama nama kunci dalam storan setempat.

4. Kosongkan data

Kami boleh menggunakan localStorage.clear() untuk mengosongkan semua data dalam storan setempat. Berikut ialah contoh:

localStorage.clear();

Kod di atas akan mengosongkan semua data dalam storan setempat.

5. Kesan sama ada localStorage disokong

Kami boleh menggunakan kod berikut untuk mengesan sama ada penyemak imbas semasa menyokong localStorage:

if (window.localStorage) {
  console.log('localStorage is supported');
} else {
  console.log('localStorage is not supported');
}

Jika penyemak imbas menyokong localStorage, keluarkan "localStorage disokong"; jika tidak, "localStorage tidak disokong" adalah output.

6 Tetapkan masa tamat tempoh data

localStorage tidak menyokong penetapan masa tamat tempoh data secara lalai, tetapi kami boleh melaksanakan fungsi ini dengan menulis kod kami sendiri, contohnya:

// 存储数据，同时存储当前时间戳
localStorage.setItem('name', '张三');
localStorage.setItem('name_time', Date.now());

// 读取数据，同时读取存储的时间戳，如果时间超过10秒，则删除数据
var name = localStorage.getItem('name');
var name_time = localStorage.getItem('name_time');
if (Date.now() - name_time > 10000) {
  localStorage.removeItem('name');
  localStorage.removeItem('name_time');
}

Kod di atas akan menyimpan cap masa semasa semasa menyimpan data, dan menyemak masa tamat storan semasa membaca data Jika melebihi 10 saat, data akan dipadamkan.

Untuk meringkaskan, perkara di atas ialah cara JavaScript melaksanakan storan setempat. Kita boleh menggunakan localStorage untuk menyimpan data, membaca data, memadam data, mengosongkan data dan operasi biasa yang lain. Pada masa yang sama, kita juga boleh menulis kod untuk melaksanakan fungsi lanjutan seperti menetapkan masa tamat tempoh data. Menggunakan localStorage boleh mengurangkan beban pelayan dan meningkatkan kelajuan halaman dan pengalaman pengguna.

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