小站更新:利用localStorage实现距离上次访问的时间显示

现在用户可以知道自己上次的访问时间,利用localStorage实现,那么,清缓存的操作就很可能一并清除localStorage,从行为上导致功能被初始化。

一分钟以内提示刚刚,大于一分钟&&一小时以内提示?分钟前,以此类推,直到?天。超过30天也依然按天算,比如59天前。

实现思路:

if (!window.localStorage.getItem(‘last-visited’)) {
this.notice = ‘这是你第一次访问本站’;
window.localStorage[‘last-visited’] = Date.now();
} else {
let last = Number(localStorage.getItem(‘last-visited’));
let now = Date.now();
window.localStorage[‘last-visited’] = now;
let diff = now – last;
if (diff < 60000) {
this.notice += ‘刚刚’;
} else if (diff >= 60000 && diff < 3600000) {
this.notice += Math.floor(diff / 60000) + ‘分钟前’;
} else if (diff >= 3600000 && diff < 24*3600000) {
this.notice += Math.floor(diff / 3600000) + ‘小时前’;
} else {
this.notice += Math.floor(diff / 24*3600000) + ‘天前’;
}
}
localStorage只能存储字符串形式的键值。虽然-号会直接进行隐式类型转换成数字类型,不过依然建议先将键值强制转换成数字类型。
其实本来是看见阮一峰老师在wangdoc上web api里有一个Intl.RelativeFormatTime可以实现相对时间,想用用这个api的。后来试了很久都发现要报错又不知道问题出在哪,后来从chrome控制台(这里点名下Firefox Dev,aurora通道升级的内核已经67了,居然控制台只报错,没说明错在哪?直接控制台用构造函数定义一个,然后发现是一个空对象。。)发现了,在MDN上找到问题,原来这个api有点新,对浏览器版本要求很高,很多人的浏览器访问都不一定能支持这个api,遂放弃。
之后想再在后端实现下记录用户访问次数和ip收集。

发表评论

电子邮件地址不会被公开。 必填项已用*标注