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

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

인터넷의 급속한 발전으로 인해 프런트엔드 개발에서는 브라우저에 데이터를 저장해야 하는 경우가 많습니다. 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에서 지정된 키의 값을 가져옵니다.

localstorage에 저장된 값은 문자열 형식만 가능하다는 점에 유의하세요. 다른 유형의 값을 저장해야 하는 경우 JSON.stringify() 메서드를 사용하여 문자열로 변환한 다음, 꺼낼 때 JSON.parse() 메서드를 사용하여 다시 원래 유형으로 변환할 수 있습니다. .

다음으로 localstorage를 사용하여 만료 시간 설정 기능을 구현하겠습니다. 데이터를 저장할 때 만료 타임스탬프를 저장한 다음 데이터를 검색할 때 만료되었는지 여부를 확인할 수 있습니다. 다음은 샘플 코드입니다. 🎜rrreee🎜위의 예에서 setLocalStorageWithExpiration 함수는 localstorage의 만료 시간을 설정하는 데 사용됩니다. 키 이름, 키 값, 만료 시간expirationMinutes(분) 등 세 가지 매개 변수를 허용합니다. 그 중 만료 시간은 현재 시간과 지정된 분 수를 더하여 계산된 후 키-값 쌍과 만료 시간이 localstorage에 저장됩니다. 🎜🎜getLocalStorageWithExpiration 함수는 localstorage의 값을 가져오고 만료되었는지 확인하는 데 사용됩니다. 먼저 localstorage에서 지정된 키의 값을 가져와서 객체로 구문 분석합니다. 그런 다음 개체가 존재하는지 확인합니다. 개체가 없거나 만료된 경우 만료되지 않은 경우 null을 반환하고 키 값을 반환합니다. 🎜🎜예제에서는 'username'이라는 키-값 쌍을 설정하고 만료 시간을 5분으로 설정했습니다. 설정 후 getLocalStorageWithExpiration 함수를 통해 'username' 값을 가져와서 콘솔에 출력하면 'John'이 출력되는 것을 확인할 수 있습니다. 그런 다음 setTimeout 함수를 사용하여 5분 후에 'username' 값을 다시 가져오는 것을 시뮬레이션하고 콘솔에 출력하면 키-값을 나타내는 null이 표시되는 것을 볼 수 있습니다. 쌍이 만료되어 제거되었습니다. 🎜🎜위의 예를 통해 localstorage를 사용하여 만료 시간을 설정하는 기능을 성공적으로 구현했습니다. localstorage는 클라이언트 브라우저에 저장되므로 사용 시 특정 위험이 있다는 점을 기억해야 합니다. 따라서 민감한 정보나 중요한 데이터를 저장하기 위해 로컬 스토리지를 사용할 때는 데이터의 보안 및 기밀성에 주의하시기 바랍니다. 🎜

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