js本地存储与vue的写法

什么是本地存储？
简单来说就是本地信息存储-关闭浏览器后还可以看到
简单的在写一下

let p={name:'aa',age:18};
//保存到本地
   function saveData(){
    localStorage.setItem('msg','hello!!!')
    localStorage.setItem('msg',666)
    localStorage.setItem('person',JSON.stringify(p))//对象改字符串

   }
//读取
   function readData(){
       console.log(localStorage.getItem('msg'))
       console.log(localStorage.getItem('msg2'))
       console.log(JSON.parse(localStorage.getItem('person')))
    }
//删除
    function deleteData(){
       localStorage.removeItem('msg2')
    }

//全部清干净
    function clearData(){
       localStorage.clear()
    }

看上去挺简单的，那么在vue里，我们怎么实时存储到本地尼又怎么页面加载时把本地数据加载到data呢
我们假设有一个data数组，我们会时不时的修改他，我们可以简单的使用watch属性，监视数据，一旦发生变化，就修改本地存储

watch:{
    todos:{
      deep:true,//深度的意思，当数组里面一个值改，也会把整个数组重新加载到本地一遍
      handler(value){
        localStorage.setItem('todos',JSON.stringify(value))
      }
    }
  }

读取数据到data的时候注意，由于无法判断用户是否第一次打开网站，我们可以做一次判断，若是，则初值为空的数组，若不是第一次打开，就把本地的数据加载到data里面去

data(){
      return {
            todos:JSON.parse(localStorage.getItem('todos'))||[]
            //判断本地有没有数据，有就加上todos没有就加上空数组[]
        
      }
  }