Bagaimana untuk menetapkan masa tamat tempoh item storan setempat

Cara menetapkan masa tamat storan setempat memerlukan contoh kod khusus

Dengan perkembangan pesat Internet, pembangunan bahagian hadapan sering memerlukan penyimpanan data dalam penyemak imbas. Localstorage ialah API Web yang biasa digunakan yang bertujuan untuk menyediakan cara untuk menyimpan data secara setempat dalam penyemak imbas. Walau bagaimanapun, localstorage tidak menyediakan cara langsung untuk menetapkan masa tamat tempoh. Artikel ini akan memperkenalkan cara menetapkan masa tamat storan setempat melalui contoh kod.

Sebelum bermula, kita perlu memahami penggunaan asas storan setempat terlebih dahulu. Anda boleh menggunakan dua kaedah berikut untuk mengendalikan localstorage:

• localStorage.setItem(key, value): Simpan pasangan nilai kunci yang ditentukan dalam localstorage.
localStorage.setItem(key, value)：将指定的键值对存储在localstorage中。
• localStorage.getItem(key)：从localstorage中获取指定键的值。

需要注意的是，localstorage存储的值只能是字符串类型。如果需要存储其他类型的值，可以使用JSON.stringify()方法将其转换为字符串，然后在取出时使用JSON.parse()方法将其转换回原始类型。

接下来，我们将使用localstorage实现设置过期时间的功能。我们可以通过在存入数据时，同时存入一个过期时间戳，然后在取出数据时判断是否已经过期。下面是一个示例代码：

// 设置localstorage的过期时间
function setLocalStorageWithExpiration(key, value, expirationMinutes) {
  const expirationMS = expirationMinutes * 60 * 1000;
  const record = {
    value: value,
    expiration: new Date().getTime() + expirationMS
  };
  localStorage.setItem(key, JSON.stringify(record));
}

// 获取localstorage的值（同时判断是否过期）
function getLocalStorageWithExpiration(key) {
  const record = JSON.parse(localStorage.getItem(key));
  if (!record) {
    return null;
  }
  if (new Date().getTime() > record.expiration) {
    localStorage.removeItem(key);
    return null;
  }
  return record.value;
}

// 使用示例
setLocalStorageWithExpiration('username', 'John', 5); // 设置过期时间为5分钟
console.log(getLocalStorageWithExpiration('username')); // 输出：John

// 5分钟后
setTimeout(() => {
  console.log(getLocalStorageWithExpiration('username')); // 输出：null
}, 5 * 60 * 1000);

在上述示例中，setLocalStorageWithExpiration函数用于设置localstorage的过期时间。它接受三个参数：键名key、键值value和过期时间expirationMinutes（以分钟为单位）。其中，过期时间通过计算当前时间加上指定的分钟数得出，然后将键值对及过期时间存储在localstorage中。

getLocalStorageWithExpiration函数用于获取localstorage的值，并判断其是否过期。它首先从localstorage中获取指定键的值，并将其解析为一个对象。然后判断对象是否存在，如果不存在或已经过期，则返回null；如果未过期，则返回键值。

在示例中，我们设置了一个名为'username'的键值对，并将过期时间设置为5分钟。在设置完毕后，我们通过getLocalStorageWithExpiration函数获取'username'的值并打印到控制台，可以看到输出为'John'。然后，我们使用setTimeoutlocalStorage.getItem(key): Dapatkan nilai kunci yang ditentukan daripada localstorage.

Perlu diambil perhatian bahawa nilai yang disimpan dalam localstorage hanya boleh daripada jenis rentetan. Jika anda perlu menyimpan nilai jenis lain, anda boleh menggunakan kaedah JSON.stringify() untuk menukarnya kepada rentetan dan kemudian gunakan kaedah JSON.parse() untuk menukarnya kembali kepada jenis asal apabila mengeluarkannya. .

Seterusnya, kami akan menggunakan localstorage untuk melaksanakan fungsi menetapkan masa tamat tempoh. Kami boleh menyimpan cap masa tamat tempoh semasa menyimpan data, dan kemudian menentukan sama ada ia telah tamat tempoh semasa mendapatkan semula data. Berikut ialah contoh kod: 🎜rrreee🎜Dalam contoh di atas, fungsi setLocalStorageWithExpiration digunakan untuk menetapkan masa tamat storan setempat. Ia menerima tiga parameter: nama kunci, nilai kunci, dan masa tamat tempoh Minit (dalam minit). Antaranya, masa tamat tempoh dikira dengan menambah masa semasa dan bilangan minit yang ditentukan, dan kemudian pasangan nilai kunci dan masa tamat disimpan dalam storan setempat. 🎜🎜 Fungsi getLocalStorageWithExpiration digunakan untuk mendapatkan nilai localstorage dan menentukan sama ada ia telah tamat tempoh. Ia mula-mula mendapat nilai kunci yang ditentukan daripada localstorage dan menghuraikannya ke dalam objek. Kemudian tentukan sama ada objek itu wujud Jika ia tidak wujud atau telah tamat tempoh, kembalikan nol jika ia belum tamat tempoh, kembalikan nilai kunci. 🎜🎜Dalam contoh, kami menyediakan pasangan nilai kunci yang dipanggil 'nama pengguna' dan menetapkan masa tamat tempoh kepada 5 minit. Selepas menyediakan, kami mendapat nilai 'nama pengguna' melalui fungsi getLocalStorageWithExpiration dan mencetaknya ke konsol Anda boleh melihat bahawa output ialah 'John'. Kemudian, kami menggunakan fungsi setTimeout untuk mensimulasikan mendapatkan nilai 'nama pengguna' sekali lagi selepas 5 minit, dan mencetaknya ke konsol Anda boleh melihat bahawa output adalah batal, menunjukkan bahawa nilai kunci pasangan telah tamat tempoh dan telah dialih keluar. 🎜🎜Melalui contoh di atas, kami berjaya melaksanakan fungsi menggunakan localstorage untuk menetapkan masa tamat tempoh. Perlu diingatkan bahawa penggunaan localstorage mempunyai risiko tertentu kerana ia disimpan dalam pelayar klien. Oleh itu, apabila menggunakan storan setempat untuk menyimpan maklumat sensitif atau data penting, sila beri perhatian kepada keselamatan dan kerahsiaan data tersebut. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menetapkan masa tamat tempoh item storan setempat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!