如何通过点击按钮添加json数据到js文件

如何通过点击按钮添加json数据到js文件

下面是data.js文件

var user_data = {

files: [
{
name: 'Root',
id: 0,
type: 'root',
type:'folder',
time: '2017-01-01',
children: [
{
name: 'Front Frame',
id: 1,
pId: 0,
type:'folder',
time: '2017-10-02',
children: [
{
name: 'React',
id: 4,
pId: 1,
type:'folder',
time: '2017-01-03',
children: []
},
{
name: 'Vue',
id: 5,
pId: 1,
type:'folder',
time: '2017-01-04',
children: [
{
name: 'vue-cli',
id: 6,
pId: 5,
type:'folder',
time: '2017-01-04',
children: []
}
]
}
]
},
{
name: 'HTML5',
id: 2,
pId: 0,
type:'folder',
time: '2017-01-01',
children: []
},
{
name: 'CSS3',
id: 3,
pId: 0,
type:'folder',
time: '2017-05-01',
children:[]
},

  ]
}    

]
};

如何通过按钮把下面这组数据添加进data.js

var newFolder = {

                id: currentDataId,
                name: '新建文件夹',
                type: 'folder',
                time: '2018-01-01',
                children: []
            } 

首先我不确定你的项目环境是否支持import的写法,如果项目环境配置了,你可以将data.js定义成一个类,然后将数据暴露出去,在你需要的js文件,或者页面当中引入data.js,我这里就假设你没有import的环境配置,那么你需要这么写
首先将你的data.js改成一个es6版本的class

export default class myData{
    static user_data=[];//这里写你的数据
}

然后将这个data.js文件放到你的项目目录当中,然后在需要的页面这样写,比如在index.html

<!--页面内容我就不写了-->
<script type="module">
  import myData from "./data.js" //这里路径根据你data.js文件和当前页面的路径自行修改
//这里我用的是Jquery绑定点击事件的方式,用其他的也可以
$('.onebutton button').click(()=>{
var newFolder = {
                id: currentDataId,
                name: '新建文件夹',
                type: 'folder',
                time: '2018-01-01',
                children: []
            } 
myData.user_data.push(newFolder)
})
<</script>>

需要注意的是,你在页面上使用user_data时,也需要先引入才能使用,就像我修改数据的方式一样,用的时候写myData.user_data即可,这个模式可以实现你在页面上点击按钮以后,添加想要的数据到对应的数据里面,但是添加的数据在页面刷新后依旧会消失,只有你初始定义的数据还在,如果需要保留,你就需要在用户退出之前,将更新的数据提交到后台保存,然后用户再次进入时初始化数据

百度了解一下，本地mock数据

首先，在页面中导入data.js的数据，然后通过puah方法，直接将数据添加到数组里面。

本地存储 。

通过本地存储，点击push数组中