Manage and set the validity period of localstorage

Understanding the expiration time of localstorage and how to manage it requires specific code examples

In modern front-end development, local storage is a very important concept. Among them, localstorage is the most commonly used local storage method. It saves the data in the browser's local environment for later use. However, when using localstorage, we also need to consider the expiration time of the data and how to manage this data.

Localstorage does not have a native expiration time setting mechanism. By default, data stored in localstorage will remain in the user's browser until the user manually clears it or the browser cache is cleared. However, in many practical applications, we usually need to set the expiration time of data to ensure the timeliness of the data.

When dealing with the expiration time of localstorage data, the common method is to manage it by adding a timestamp (timestamp) or an expiration timestamp (expiration timestamp). A timestamp is a number that represents the current time, usually expressed as a Unix timestamp, which is the number of seconds that have elapsed since 00:00:00 on January 1, 1970. By comparing the current time with the stored timestamp, we can determine whether the data has expired.

The following is a sample code that shows how to set and manage the expiration time of localstorage data:

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

In the above sample code, we use the setLocalStorageData method to set localstorage data , and add an expiration time. In this method, we first convert the expired hours to milliseconds and get the current timestamp through the Date.now() method. Then, we save the data and the calculated expiration timestamp in an object, and serialize the object into a string through the JSON.stringify method and store it in localstorage.

At the same time, we also wrote the getLocalStorageData method to obtain localstorage data and check whether the data has expired. In this method, we first parse the localstorage data into an object through the JSON.parse method. We then check if there is an expiration timestamp in the parsed object, and if the expiration timestamp is greater than the current timestamp. If the data has not expired, the value of the data is returned; otherwise, null is returned.

The last part of the example shows how to use these two methods. We first use the setLocalStorageData method to set a data with an expiration time of 24 hours. Then, get this data through the getLocalStorageData method and print the result to the console. Next, we use the setTimeout function to delay the execution of the code, and use the getLocalStorageData method in the code to obtain the data again. Since our delay time exceeds the expiration time of the data, the result obtained is null, indicating that the data has expired.

Through the above code examples, we can learn how to set and manage the expiration time of localstorage data. By adding timestamps or expiration timestamps, we can effectively control the timeliness of data and improve the reliability and performance of applications. Of course, in actual applications, we may also need to consider other factors, such as data update mechanisms and caching strategies, to better manage localstorage data.

The above is the detailed content of Manage and set the validity period of localstorage. For more information, please follow other related articles on the PHP Chinese website!