封装localStorage本地存储的方法

一、封装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);
        },
    

注意：

1. 由于题目内容是从子组件里面动态获取的，在页面刷新的时候，题目就会更新
2. 想要页面刷新获取题目，将题目的最新状态保存下来，那么方法就应该写在子组件里面

🔎父组件

• 子组件标签如下：

• 方法写在子组件标签里面：

3.子组件向父组件传值

• this.$emit('事件',参数) 用于当子组件需要调用父组件的方法的场景下.
• 父组件的题目从子组件里面获取，但是页面刷新是要将 父组件内部 更新的方法动态传递到子组件中并更新，这样才可以确保题目状态是最新的

🔎子组件

在create里面做一个判断

写好后可以删除本地存储做一个验证