将以下代码放入 vue 项目结构中的 utils 文件夹 storage.js 文件中:
export default {
//根据key获取内容
get(name) {
//console.log(window.location);
var d = localStorage.getItem(name);
if (!d) {
//token判断,是否需要登录权限验证
if (name == 'Token' && this.isNeedToken()) {
setTimeout(function () {
window.location.href = '/index?returnurl=' + encodeURIComponent(window.location.href.replace(window.location.origin, ""));
}, 2000);
}
return null;
}
var data = JSON.parse(d);
var now = new Date().getTime();
//自定义的有效期判断
if (data.time && data.time < now) {
this.del(name);
if (name == 'Token') {
setTimeout(function () {
window.location.href = '/index?returnurl=' + encodeURIComponent(window.location.href.replace(window.location.origin, ""));
}, 2000);
}
return null;
}
return data.data;
},
//带有有效期的
setWithExpire(name, value, expiredays) {
if (!expiredays || expiredays <= 0) {
expiredays = 1;
}
var curTime = new Date().getTime();
var thatTime = new Date(curTime + expiredays * (24 * 60 * 60 * 1000)).getTime();
localStorage.setItem(name, JSON.stringify({ data: value, time: thatTime }));
},
set(name, value) {
localStorage.setItem(name, JSON.stringify({ data: value }));
},
del(name) {
localStorage.removeItem(name);
},
//清空storage所有key
clear() {
localStorage.clear();
},
//根据路由判断是否需要登录权限
isNeedToken() {
var url = window.location.pathname;
url = url.replace('//', '/');
url = url.toLowerCase();
//console.log(url);
if (url == '/') {
return false;
}
var urlArray = [
'/register',
'/login',
'/index',
'/foundmima',
'/aboutUs',
'/privacyservices',
];
for (var i = 0; i < urlArray.length; i++) {
if (url.indexOf(urlArray[i]) >= 0) {
return false;
}
}
return true;
}
}
用法如下:在需要使用 localStorage 的组件中,先引入 storage.js 文件,然后调用函数即可,示例:
<script>
import storage from "@/utils/storage";
export default {
data() {
return {
userName: storage.get('userName'), //获取 localStorage 中 key 为 userName 的值
};
},
mounted() {
//常用写法
storage.set('userName', 'admin');//存入值
storage.setWithExpire('userName', 'admin', 1);//存入有效期为 1 天的值
storage.del('userName');//删除值
storage.clear();//清空所有值,一般用于用户退出登录时
},
methods: {
}
};
</script>