Vue2：利用watch和localStorage存储数据案例

一、场景描述

原本的代码中，我利用一个变量taskList来保存所有的待办事项。写好了对应的增删改查等操作。
此时，我想利用localStorage来实现临时的存储，这样，刷新页面后，我的操作不会丢失！

二、方案设计

• 方案1
  直接在原来的增删改查等函数中，添加localStorage自带的setItem、getItem等方法，实现效果。

• 方案2
  利用watch来监视taskList变量，然后，在watch中进行localStorage操作。

  显然，方案2更合理。

三、代码实现

Vue组件中的vc实例代码修改如下：
data块代码修改：
这里需要利用localStorage读取数据

        data() {
            return {
                taskList: JSON.parse(localStorage.getItem('taskList')) || []
            }
        }

新增watch代码块：
这里利用localStorage对数据进行新增和更新

        watch:{
            //简写形式存在一个问题：就是无法检测到taskList对象内部字段的变化
            /*
            taskList(newVal){
                localStorage.setItem('taskList',JSON.stringify(newVal));
            }
            */
            //完整形式，实现深度监视，监视对象内部的字段值变化
            taskList:{
                deep:true,
                handler(newVal){
                    localStorage.setItem('taskList',JSON.stringify(newVal));
                }
            }
        }

这里要注意一点，因为，taskList是一个对象，我需要监视对象内部字段的变化，所以，这里watch必须要设置深度监视，才能实现相关功能。