封装localStorage本地存储的方法_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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个方法比较简陋，用下面这个功能较为完整的

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.在需要的页面引入并使用

• storage.set('answerItems',this.answer.answerItems) 前面是需要更新的键名，后面是需要更新键名的值

  • 写一个method方法：

    readUpdateVal() {
          storage.set("answerItems", this.answer.answerItems);
        },
    1
    2
    3

注意：

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/482295