【工作笔记0024】Vue 中对 localStorage 使用进行封装

将以下代码放入 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>