vue前端使用localStorage实现筛选项缓存

存入localStorange

data() {
	return {
		//表单内容
		form:{
			name: 'Nicholas',
		    age: '23',
		    sex: 'boy',
		    hobby: ['ball','game','movie'],
		    color:['red','balck','green'],
		    course:['math','English','Chinese']
		}
	};
},
methods: {
	//写缓存
	handleSave() {
		Object.keys(this.form).forEach(item => {
	        // 多选选项(这里与后端约定，数组一般传字符串)
	        if (['hobby', 'color', 'course'].includes(item)) {
	            this.form[item] = this.form[item].join(',') ;
	        } 
        });
		localStorage.setItem('saveForm', JSON.stringify(form));
	}
	//清空缓存
	handleClear() {
		localStorage.removeItem('saveForm');
	}
}
   

表单读缓存

created() {
	// 无缓存
	if (localStorage.getItem('saveForm') === null) {
	// 给一个默认值
		this.form = {
			name: 'Nicholas',