面试官问：localStorage 可以设置过期时间吗？我直接说不能_AI阅读总结 — 包阅AI

曾经我还小，没有使用过localStorage，只使用过cookie。然后只是了解了一下localStorage就踏上了面试的征途。我清晰的记得，大家的博客上都说localStorage是不能设置过期时间的，设置了就是永久的，天长地久那种永久，我信以为真了。

面试的时候，开水厂的面试官带着眼镜，拿着苹果本，我一边回答他一边做记录。有一道题，我至今记得，我感觉他的眼光都是轻蔑的，似笑非笑，我知道他肯定是把我给pass掉了。他问我：localStorage可以设置过期时间吗？我自信的回答：不能，只有用户主动清理了他才会清理。

我知道，其他题我答的也不好，但这道题让我印象最深，因为我看了假博客，让我做出了错误的回答，让我失去了成为一名外卖员的资格，我从此将不能身穿黄马褂，将不能每天与大鱼大肉为伴，也不能每天喝开水。

面试结束的时候，面试官问我：你还有什么要问我的吗？我问：localStorage是可以设置过期时间的吗？他仍然是一副高高在上的样子，说：你自己回去查一查吧。好了，今天就到这里吧。

在那个艳阳高照的夏天，我还很年轻刚毕业没多久，我还精力很旺盛。从公司到地铁站走的那么一会儿，我身上被汗水打湿了。但我完全没有在意，我就想，我一定要查出来，localStorage到底能不能设置过期时间。

1 设置过期时间

这件事情，我想了很久，百思不得其解。那个时候流行说：23，窜一窜。我那个时候，喜欢在墙上划一根横线，隔一段时间站在那里量一量，看我长高了没。我突然有一天想着，我在那里划线就是第一次设置localStorage，等我再去对比的时候，不就有了时间差值了嘛，如果我第二次量的时候，从175cm，长到176cm了，不就得重新划一根线嘛，之前的不就过期了嘛，我就得重新用这根176的线呗。

于是，我又开始去网上找相关文章，终于，功夫不负苦心人，我终于找到了1篇说设置localStorage设置过期时间的文章，果然和我想的差不多。代码类似这样：

var key = "name"var expiresTime = 1000 * 60 * 10var setObj = {    value,    expires: new Date().getTime() + expiresTime,}window.localStorage.setItem(key, JSON.stringify(setObj))

2 过期时间提升版

从此以后，在项目开发中，遇到localStorage的设置，我习惯性的开始添加公共方法，并且在公共方法中，我开始设置过期时间，但考虑到不需要过期时间的情况，我也做了参数设置，代码就像这样：

setLocalstorage(key, value, expiresTime) {    expiresTime = expiresTime || 0;    let setObj = {        value,        expires: new Date().getTime() + expiresTime,        isExpires: expiresTime ? true : false    }    window.localStorage.setItem(key, JSON.stringify(setObj));},

当然，有设置的代码就需要有获取的代码，也就是 getLocalstorage 的代码，我都放到了git代码库里，需要的小伙伴可以去拿，github代码库地址是(jsToolBigBox/js-tool-big-box)

当然，如果你能给我的项目点个赞，或者又更好的思路，提交上来，也是可以的，欢迎你哦！

3 更高效的使用方式

一直到现在呢，我不再喜欢将这些公共方法，在项目里来回拷贝，我将这些公共方法封装成了npm包，这样在前端项目开发中，就更能够快捷高效的使用了。

3.1 安装js-tool-big-box工具库

执行安装命令：

npm install js-tool-big-box

引入storeBox对象，cookie相关的，和localStorage相关的公共方法，在这个对象下面

import { storeBox } from 'js-tool-big-box';

3.2 设置localStorage

storeBox.setLocalstorage('name', 'jim', 1000*60);

在这个方法中，你可以传入过期时间，表示给localStorage设置的过期时间。当然，你也可以不传入，表示不设置过期时间，就是永久的。

3.3 获取localStorage

setTimeout(() => {      const myName = storeBox.getLocalstorage('name');      console.log('100秒后能否获取到myName呢？', myName);}, 1000*100)

这个getLocalstorage方法中呢，会先判断设置（存入）的时候，是否设置了过期时间，然后再根据这个时间，判断是直接获取，还是做时间对比。如果未过期呢，就从数据中取出对应的value值，如果过期了，则删除这个localstorage的key所对应的数据。

3.4 移除localStorage

本着原生有且原生方便则不加的原则呢，我们并没有给js-tool-big-box添加移除localStorage的方法，使用者如果遇到移除localStorage的场景呢，可以直接使用原生api即可。

window.localStorage.removeItem('name');

4 最后

好啦，今天就分享到这里啦。希望看到这篇文章的小伙伴们，周末愉快，7月愉快，8月9月10月都愉快，一直愉快。工作顺利，心情舒畅，爱情美满，你们都是好人，我知道好人一定会帮我点赞的。github代码库地址是(jsToolBigBox/js-tool-big-box)

如果你正在求职，或者需要学习优化简历的知识，这里有免费的掘金小册子，很不错的，点我(简历宝典 – 经海路大白狗的专栏 – 掘金 (juejin.cn))