以下是一个使用本地存储和过期的代码示例:
// 设置数据到本地存储
function setLocalStorage(key, value, expiration) {
const now = new Date();
const item = {
value: value,
expiration: now.getTime() + expiration * 1000 // 将过期时间转换为毫秒
};
localStorage.setItem(key, JSON.stringify(item));
}
// 从本地存储获取数据
function getLocalStorage(key) {
const item = JSON.parse(localStorage.getItem(key));
if (!item) {
return null;
}
const now = new Date();
if (now.getTime() > item.expiration) {
// 数据已过期
localStorage.removeItem(key);
return null;
}
return item.value;
}
// 示例使用
setLocalStorage("name", "John Doe", 3600); // 设置名为"name"的值为"John Doe",过期时间为1小时
const name = getLocalStorage("name"); // 从本地存储获取名为"name"的值
if (name) {
console.log("Name:", name);
} else {
console.log("Name has expired or not set");
}
上述代码中,setLocalStorage
函数用于将数据存储到本地存储中,并设置一个过期时间。在这个例子中,过期时间以秒为单位传递给函数。函数内部将过期时间转换为毫秒,并将数据以JSON字符串的形式存储在本地存储中。
getLocalStorage
函数用于从本地存储中获取数据。首先,它解析存储的JSON字符串,并检查数据是否存在。如果数据不存在,则返回null。如果数据存在,函数会比较当前时间和数据的过期时间。如果当前时间已经超过了过期时间,函数会从本地存储中删除该数据,并返回null。否则,函数返回存储的值。
最后,示例代码使用setLocalStorage
函数将名为"name"的值存储在本地存储中,并设置过期时间为1小时。然后,使用getLocalStorage
函数获取名为"name"的值,并根据结果输出不同的消息。如果值存在且未过期,则输出该值。否则,输出相应的消息。
上一篇:本地存储元素在头部后未更新
下一篇:本地存储与Redux不按预期工作