vue学习三,localStorage存储todolist(慕课网学习笔记)

1.LocalStorage 是HTML5 本地存储

2.store.js

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

3.App.vue中引入store.js

import Store from './store'; 

4.添加数组更改的监听事件,存入LocalStorage

watch:{
     //监听数组更改
     items:{
        handler:function(items){
             Store.save(items);//存储window.localStorage
        },
        deep:true //深层更改
     }
  }

5.页面初始化的值从LocalStorage中取出

items: Store.fetch()

6.完整代码







你可能感兴趣的:(前端技术)