一、封装localStorage本地存储的方法
- 场景:试卷从后台动态获取,在页面刷新或者不小心退出页面,需要保存这些题目的答案以及状态可以用到localStorage方法
1.封装方法
- localStorage.js
var storage = {
set(key, value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key);
}
}
export default storage;
这个方法比较简陋,用下面这个功能较为完整的
var storage = {
set(key, value) {
if (typeof value === "object") {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
},
get(key) {
const data = localStorage.getItem(key);
try {
return JSON.parse(data);
} catch (err) {
return data;
}
},
remove(key) {
localStorage.removeItem(key);
},
};
export default storage;
2.在需要的页面引入并使用
-
storage.set('answerItems',this.answer.answerItems)
前面是需要更新的键名,后面是需要更新键名的值-
写一个method方法:
readUpdateVal() { storage.set("answerItems", this.answer.answerItems); },
-
注意:
- 由于题目内容是从子组件里面动态获取的,在页面刷新的时候,题目就会更新
- 想要页面刷新获取题目,将题目的最新状态保存下来,那么方法就应该写在子组件里面
🔎父组件
- 子组件标签如下:
- 方法写在子组件标签里面:
3.子组件向父组件传值
this.$emit('事件',参数)
用于当子组件需要调用父组件的方法的场景下.- 父组件的题目从子组件里面获取,但是页面刷新是要将 父组件内部 更新的方法动态传递到子组件中并更新,这样才可以确保题目状态是最新的
🔎子组件
在create里面做一个判断
写好后可以删除本地存储做一个验证