로컬스토리지의 유효기간 관리 및 설정

로컬 스토리지의 만료 시간과 관리 방법을 이해하려면 구체적인 코드 예제가 필요합니다.

현대 프런트엔드 개발에서 로컬 스토리지는 매우 중요한 개념입니다. 그 중 로컬 스토리지(localstorage)가 가장 일반적으로 사용되는 로컬 스토리지 방식이다. 나중에 사용할 수 있도록 브라우저의 로컬 환경에 데이터를 저장합니다. 그러나 localstorage를 사용할 때는 데이터의 만료 시간과 이 데이터를 관리하는 방법도 고려해야 합니다.

Localstorage에는 기본 만료 시간 설정 메커니즘이 없습니다. 기본적으로 localstorage에 저장된 데이터는 사용자가 수동으로 지우거나 브라우저 캐시가 지워질 때까지 사용자의 브라우저에 남아 있습니다. 그러나 많은 실제 응용 프로그램에서는 일반적으로 데이터의 적시성을 보장하기 위해 데이터 만료 시간을 설정해야 합니다.

로컬 스토리지 데이터의 만료 시간을 처리할 때 일반적인 방법은 타임스탬프(timestamp) 또는 만료 타임스탬프(expiration timestamp)를 추가하여 관리하는 것입니다. 타임스탬프는 현재 시간을 나타내는 숫자로, 일반적으로 Unix 타임스탬프로 표현되며, 이는 1970년 1월 1일 00:00:00 이후 경과된 초 수입니다. 현재 시간을 저장된 타임스탬프와 비교하여 데이터가 만료되었는지 여부를 확인할 수 있습니다.

다음은 localstorage 데이터의 만료 시간을 설정하고 관리하는 방법을 보여주는 샘플 코드입니다.

// 设置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小时

위 샘플 코드에서는 setLocalStorageData 메소드를 사용하여 localstorage 데이터를 설정하고 추가합니다. 만료 시간. 이 메서드에서는 먼저 만료된 시간을 밀리초로 변환하고 Date.now() 메서드를 통해 현재 타임스탬프를 가져옵니다. 그런 다음 데이터와 계산된 만료 타임스탬프를 객체에 저장하고 JSON.stringify 메서드를 통해 객체를 문자열로 직렬화하여 localstorage에 저장합니다. setLocalStorageData方法来设置localstorage数据，并添加一个过期时间。在这个方法中，我们先将过期的小时数转换为毫秒，并通过Date.now()方法获取当前时间戳。然后，我们将数据和计算得到的过期时间戳保存在一个对象中，并通过JSON.stringify方法将对象序列化成字符串后存储在localstorage中。

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

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

동시에 로컬 스토리지 데이터를 얻고 데이터가 만료되었는지 확인하기 위해 getLocalStorageData 메서드도 작성했습니다. 이 방법에서는 먼저 JSON.parse 메서드를 통해 로컬 저장소 데이터를 객체로 구문 분석합니다. 그런 다음 구문 분석된 객체에 만료 타임스탬프가 있는지, 만료 타임스탬프가 현재 타임스탬프보다 큰지 확인합니다. 데이터가 만료되지 않은 경우 데이터 값이 반환되고, 그렇지 않으면 null이 반환됩니다.

예제의 마지막 부분에서는 이 두 가지 방법을 사용하는 방법을 보여줍니다. 먼저 setLocalStorageData 메소드를 사용하여 만료 시간이 24시간인 데이터를 설정합니다. 그런 다음 getLocalStorageData 메서드를 통해 이 데이터를 얻고 결과를 콘솔에 인쇄합니다. 다음으로 setTimeout 함수를 사용하여 코드 실행을 지연시키고 코드의 getLocalStorageData 메서드를 사용하여 데이터를 다시 가져옵니다. 지연 시간이 데이터 만료 시간을 초과했기 때문에 얻은 ​​결과는 null이며 이는 데이터가 만료되었음을 나타냅니다. 🎜🎜위의 코드 예시를 통해 로컬 스토리지 데이터의 만료 시간을 설정하고 관리하는 방법을 배울 수 있습니다. 타임스탬프 또는 만료 타임스탬프를 추가함으로써 데이터의 적시성을 효과적으로 제어하고 애플리케이션의 안정성과 성능을 향상시킬 수 있습니다. 물론 실제 애플리케이션에서는 로컬 스토리지 데이터를 더 잘 관리하기 위해 데이터 업데이트 메커니즘 및 캐싱 전략과 같은 다른 요소도 고려해야 합니다. 🎜

위 내용은 로컬스토리지의 유효기간 관리 및 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!