vue如何将数据存储到本地JSON文件中？

因为数据量比较少想将数据存储到本地JSON文件中进行增删改查

用localStorage本地存储来做 ，把json文件内容用JSON.stringfy转成字符串,用localStorage.setItem(k,v)保存

// 提供一个demo  
var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);

 

目标

使用Vue构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。

效果页面

比如我们要实现这样列表、新增、编辑三个页面：

列表页面

7043d5d3dc98eda0fdab185efbdbda4c.png

新增页面

1427b152121487c04ab5ac598ca037ac.png

编辑页面

01a60e70b9805c9c7888ab860f616c8c.png

我们把这些用户信息保存到Todos的数组中，然后增删改查就在这个数组上进行：

Todos: [{        Name: "遛狗"    },    {        Name: "跑步"    }]

我们在这里一共要实现TodoList.vue、TodoAdd.vue、TodoEdit.vue三个组件，分别对应列表页面、新增页面、编辑页面的处理

列表功能

首先，在TodoList.vue中提供一个setTodos方法，将需要展示的数据给了数组Todos：

setTodos(arr) {    this.Todos = JSON.parse(JSON.stringify(arr));}

然后，在html中使用v-for把Todos数组渲染出来：

{{index+1}}    {{item.Name}}            编辑        删除

新增功能

首先，在TodoList.vue中提供一个新增按钮及新增页面组件：

新增

接下来，TodoList.vue中提供addTodo方法，控制TodoAdd页面是否显示：

addTodo() {    this.addDialogVisible = true;},

接下来，在TodoAdd.vue中提供一个save和cancel方法，分别调用TodoList.vue中的createTodo和cancel方法：

save() {    this.$emit('save', this.selectedItem);},cancel() {    this.$emit('cancel');}

最后，我们分别提供createTodo方法，主要使用push方法，把信息添加到Todos数组的最后：

createTodo(item) {    this.Todos.push(item);    this.setTodos(this.Todos);    this.selectedIndex = -1;    this.selectedItem = {}    this.addDialogVisible = false;},

修改功能

首先，在TodoList.vue中提供一个编辑按钮及编辑页面组件：

编辑

接下来，TodoList.vue中提供editTodo方法，控制TodoEdit页面是否显示：

editTodo(index) {    this.selectedIndex = index;    this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));    this.editDialogVisible = true;},

接下来，在TodoEdit.vue中提供一个save和cancel方法，分别调用TodoList.vue中的updateTodo和cancel方法：

save() {    this.$emit('save', this.selectedItem);},cancel() {    this.$emit('cancel');}

最后，我们分别提供updateTodo方法，更新信息到Todos数组：

updateTodo(item) {    this.Todos[this.selectedIndex] = item;    this.setTodos(this.Todos);    this.selectedIndex = -1;

 

删除功能

在vue中提供一个deleteTodo方法，删除时，通过splice(index, 1)，可以删除index位置的数据，页面上的数据自动就会更新：

deleteTodo(index) {    this.Todos.splice(index, 1);    this.selectedIndex = -1;    this.selectedItem = {}},

 

文中用到的代码我们放在：https://github.com/zcqiand/miscellaneous/tree/master/vue

 

想对文件读写js能实现，就你的需求而言，使用本地存储就够了

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

前端操作文件本身就是不合理的，操作文件一般后台去做，所以给你提供了本地存储数据的思路