2.从loacalstorage和json中读取数据

176 阅读1分钟

一、从localstorage中读取数据

先将表格数据存储到localstorage中,每次修改数据后点击确认刷新存储

1. 在确认按钮上绑定submit()方法

@click="submit()"

2. 将需要存储的数组转化为JSON字符串存入localstorage

submit() {
    window.localStorage.setItem('eventTable', JSON.stringify(this.eventTableData));    window.localStorage.setItem('timeSta', JSON.stringify(this.timeStatics));
}

3. 在浏览器中打开控制台检查localstorage

4. 在created()方法中,即初始化时读取localstorage内的数据赋值给变量

this.eventTableData = JSON.parse(window.localStorage.getItem("eventTable"));
this.timeStatics = JSON.parse(window.localStorage.getItem("timeSta"));

二、从JSON文件中读取数据

1. 安装vue-resource

npm install vue-resource

2. 编辑index.js导入vue-resource

import VueResource from 'vue-resource'Vue.use(VueResource);

3. 在created()方法中添加get方法

this.$http.get('../static/eventData.json').then((res) => {
    this.eventTableData = res.body.list;
    this.timeStatics = res.body.static;
});