Rumah  >  Artikel  >  hujung hadapan web  >  Urus dan tetapkan tempoh sah storan setempat

Urus dan tetapkan tempoh sah storan setempat

王林
王林asal
2024-01-11 16:37:061061semak imbas

Urus dan tetapkan tempoh sah storan setempat

Untuk memahami masa tamat storan setempat dan cara mengurusnya, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan moden, storan tempatan merupakan konsep yang sangat penting. Antaranya, localstorage ialah kaedah storan tempatan yang paling biasa digunakan. Ia menyimpan data dalam persekitaran setempat penyemak imbas untuk kegunaan kemudian. Walau bagaimanapun, apabila menggunakan storan setempat, kami juga perlu mempertimbangkan masa tamat tempoh data dan cara mengurus data ini.

Localstorage tidak mempunyai mekanisme tetapan masa tamat tempoh asli. Secara lalai, data yang disimpan dalam localstorage akan kekal dalam penyemak imbas pengguna sehingga pengguna mengosongkannya secara manual atau cache penyemak imbas dikosongkan. Walau bagaimanapun, dalam banyak aplikasi praktikal, kita biasanya perlu menetapkan masa tamat tempoh data untuk memastikan ketepatan masa data.

Apabila berurusan dengan masa tamat data storan setempat, kaedah biasa adalah untuk mengurusnya dengan menambah cap masa (cap masa) atau cap masa tamat tempoh (cap masa tamat tempoh). Cap masa ialah nombor yang mewakili masa semasa, biasanya dinyatakan sebagai cap masa Unix, iaitu bilangan saat yang telah berlalu sejak 00:00:00 pada 1 Januari 1970. Dengan membandingkan masa semasa dengan cap masa yang disimpan, kami boleh menentukan sama ada data telah tamat tempoh.

Berikut ialah contoh kod yang menunjukkan cara untuk menetapkan dan mengurus masa tamat tempoh data storan setempat:

// 设置localstorage数据,并添加过期时间
function setLocalStorageData(key, value, expirationHours) {
  const expirationMS = expirationHours * 60 * 60 * 1000; // 将小时转换为毫秒
  const expirationTime = Date.now() + expirationMS; // 计算过期时间戳
  const data = {
    value: value,
    expirationTime: expirationTime
  };
  localStorage.setItem(key, JSON.stringify(data));
}

// 获取localstorage数据,并检查是否过期
function getLocalStorageData(key) {
  const data = JSON.parse(localStorage.getItem(key));
  if (data && data.expirationTime && data.expirationTime > Date.now()) {
    return data.value;
  }
  return null; // 数据已过期或不存在时返回null
}

// 示例用法
setLocalStorageData('username', 'JohnDoe', 24); // 设置一个过期时间为24小时的数据
const username = getLocalStorageData('username'); // 获取数据
console.log(username); // 输出 "JohnDoe"

setTimeout(() => {
  const expiredUsername = getLocalStorageData('username'); // 延迟后再次获取数据
  console.log(expiredUsername); // 输出 null,数据已过期
}, 25 * 60 * 60 * 1000); // 延迟25小时

Dalam kod sampel di atas, kami menggunakan kaedah setLocalStorageData untuk menetapkan data storan setempat dan menambah masa tamat tempoh. Dalam kaedah ini, kami mula-mula menukar jam tamat tempoh kepada milisaat dan mendapatkan cap masa semasa melalui kaedah Date.now(). Kemudian, kami menyimpan data dan cap masa tamat tempoh yang dikira dalam objek, dan mensiri objek itu menjadi rentetan melalui kaedah JSON.stringify dan menyimpannya dalam storan setempat. setLocalStorageData方法来设置localstorage数据,并添加一个过期时间。在这个方法中,我们先将过期的小时数转换为毫秒,并通过Date.now()方法获取当前时间戳。然后,我们将数据和计算得到的过期时间戳保存在一个对象中,并通过JSON.stringify方法将对象序列化成字符串后存储在localstorage中。

同时,我们还编写了getLocalStorageData方法来获取localstorage数据,并检查数据是否过期。在这个方法中,我们首先通过JSON.parse方法将localstorage数据解析成一个对象。然后,我们检查解析的对象中是否有过期时间戳,并且过期时间戳是否大于当前时间戳。如果数据未过期,则返回数据的值;否则,返回null。

示例的最后部分展示了如何使用这两个方法。我们首先使用setLocalStorageData方法设置一个过期时间为24小时的数据。然后,通过getLocalStorageData方法获取这个数据,并将结果打印到控制台中。接着,我们使用setTimeout函数延迟执行代码,并在代码中使用getLocalStorageData

Pada masa yang sama, kami juga menulis kaedah getLocalStorageData untuk mendapatkan data storan setempat dan menyemak sama ada data tersebut telah tamat tempoh. Dalam kaedah ini, kami mula-mula menghuraikan data storan setempat ke dalam objek melalui kaedah JSON.parse. Kami kemudian menyemak sama ada terdapat cap masa tamat tempoh dalam objek yang dihuraikan dan jika cap masa tamat tempoh adalah lebih besar daripada cap masa semasa. Jika data belum luput, nilai data dikembalikan jika tidak, batal dikembalikan.

Bahagian terakhir contoh menunjukkan cara menggunakan kedua-dua kaedah ini. Kami mula-mula menggunakan kaedah setLocalStorageData untuk menetapkan data dengan masa tamat tempoh 24 jam. Kemudian, dapatkan data ini melalui kaedah getLocalStorageData dan cetak hasilnya ke konsol. Seterusnya, kami menggunakan fungsi setTimeout untuk menangguhkan pelaksanaan kod dan menggunakan kaedah getLocalStorageData dalam kod untuk mendapatkan data semula. Memandangkan kelewatan kami melebihi masa tamat tempoh data, keputusan yang diperoleh adalah batal, menunjukkan bahawa data telah tamat tempoh. 🎜🎜Melalui contoh kod di atas, kita boleh belajar cara menetapkan dan mengurus masa tamat tempoh data storan setempat. Dengan menambahkan cap masa atau cap masa tamat tempoh, kami boleh mengawal ketepatan masa data dengan berkesan dan meningkatkan kebolehpercayaan dan prestasi aplikasi. Sudah tentu, dalam aplikasi sebenar, kami mungkin juga perlu mempertimbangkan faktor lain, seperti mekanisme kemas kini data dan strategi caching, untuk mengurus data storan setempat dengan lebih baik. 🎜

Atas ialah kandungan terperinci Urus dan tetapkan tempoh sah storan setempat. 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