面试官问:localStorage可以设置过期时间吗?我直接说不能

面试官问:localStorage可以设置过期时间吗?我直接说不能

技术博客 admin 488 浏览

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

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

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

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

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

1 设置过期时间

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

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

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

2 过期时间提升版

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

javascript
复制代码
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相关的公共方法,在这个对象下面

javascript
复制代码
import { storeBox } from 'js-tool-big-box';

3.2 设置localStorage

arduino
复制代码
storeBox.setLocalstorage('name', 'jim', 1000*60);

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

3.3 获取localStorage

javascript
复制代码
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即可。

javascript
复制代码
window.localStorage.removeItem('name');

4 最后

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

源文:面试官问:localStorage可以设置过期时间吗?我直接说不能

如有侵权请联系站点删除!

技术合作服务热线,欢迎来电咨询!