Vue_localStorage本地存储

html 的localStroage 可以将用户输入的信息存储在本地浏览器中
在控制台输入：window 可以看到window对象的属性和方法

//设置localStroage值
localStorage.setItem（'username','zhangsan'）;
//获取localStroage值
localStorage.getItem（'username'）;
==>zhangsan

输入localStorage.setItem（“username”,’zhangsan’）敲回车就可以将该key值为username，value值为zhangsan的信息存储在本地了。可以在Application中的LocalStorage中查看
eg:



现在在Vue中建立一个localStorage的文件来存储我们输入的信息
在src文件下建立一个localstorage的文件，在里面写两个方法：

const  STORAGE_KEY = 'todos-vuejs'
export default{
   fetch(){
      return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
   },
   save(items){
    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
   }
}

然后在APP.vue中引入该model：

 import localStore from './localstorage.js'

添加一个watch 监控：当items的数据发生变化的时候，将改变后的值放在本地存储。

  watch:{          
       items:{
          handler:function(items){
          localStore.save(items)   
       },
         deep:true
       }
   }
   //这一步将items变化之后的值都存在了localStorage之中

items的值直接从localstorage 中取，这样刷新值就不会被清空了,刷新数据不会丢失。

data(){
  return{
   items:localStore.fetch(),
}
}