【工作筆記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>