LocalStorage设置过期时间失效及页面加载添加Div属性需求

核心问题 #

1. setWithExpiry函数定义不完整：你提供的代码里缺少该函数的完整声明，参数key、value、ttl未被正确接收，ttl会被视为undefined，最终expiry计算异常（new Date().getTime() + undefined得到NaN，JSON序列化后变为null，后续getWithExpiry校验时会直接删除条目）。
2. TTL单位不符合预期：你传入的300是毫秒级，仅0.3秒就会过期，这大概率不是你想要的有效时长。

修复后的完整代码 #

// 带过期时间的LocalStorage设置函数
function setWithExpiry(key, value, ttl) {
    if (!localStorage.getItem(key)) {
        const item = {
            value: value,
            // ttl单位为毫秒，如需秒则乘以1000，比如300秒就是300*1000
            expiry: new Date().getTime() + ttl,
        };
        localStorage.setItem(key, JSON.stringify(item));
    }
}

// 带过期校验的LocalStorage获取函数
function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) {
        return null;
    }
    const item = JSON.parse(itemStr);
    const now = new Date().getTime();
    if (now > item.expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return item.value;
}

// 设置过期时间，示例为300秒（可根据需求调整）
setWithExpiry('init', 'true', 300 * 1000);

// 获取并校验过期状态
const initValue = getWithExpiry('init');

// 若有效则给目标div添加属性
if (initValue !== null) {
    // 确保ins已正确指向目标Div（比如通过document.getElementById获取）
    ins.setAttribute('data-cp-first', 'true');
}

额外注意事项 #

• 提前确认ins变量已正确获取到目标Div元素，比如用document.querySelector("#your-div-id")或document.getElementById("your-div-id")。
• TTL默认单位是毫秒，若需要以分钟/小时为单位，记得乘以对应系数（如1小时=3600*1000毫秒）。
• 首次加载页面时，若init不存在会自动创建带过期时间的条目，全程无需依赖Cookie。

内容的提问来源于stack exchange，提问作者Chris Warr