로컬 저장소 항목의 만료 시간을 설정하는 방법

로컬 스토리지의 만료 시간을 설정하려면 특정 코드 예제가 필요합니다.

인터넷의 급속한 발전으로 인해 프런트엔드 개발에서는 브라우저에 데이터를 저장해야 하는 경우가 많습니다. Localstorage는 브라우저에 로컬로 데이터를 저장하는 방법을 제공하는 것을 목표로 하는 일반적으로 사용되는 웹 API입니다. 그러나 localstorage는 만료 시간을 설정하는 직접적인 방법을 제공하지 않습니다. 이번 글에서는 코드 예시를 통해 localstorage의 만료 시간을 설정하는 방법을 소개하겠습니다.

시작하기 전에 먼저 로컬 저장소의 기본 사용법을 이해해야 합니다. 다음 두 가지 방법을 사용하여 localstorage를 작동할 수 있습니다.

• localStorage.setItem(key, value): 지정된 키-값 쌍을 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): localstorage에서 지정된 키의 값을 가져옵니다.

위 내용은 로컬 저장소 항목의 만료 시간을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!