现在很多公司都有多个测试环境或者其他环境，有些配置信息在其他环境需要同样的信息，按照传统只能修改数据库对于新手小白来说只能求助于服务端了，现在前端也可以直接将当前的数据导出为json文件，然后在需要的地方导入即可也不需要服务端，相对比较方便，而且还比较灵活。
遵循本博客传统，话不多说上代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json导入导出</title><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;}.box {width: 100%;height: 100%;display: flex;}.main {width: 500px;margin-right: 20px;}.top {height: 50px;line-height: 50px;overflow: hidden;}.show-json {width: 500px;height: 600px;background-color: #f5f5f5;padding: 15px;box-sizing: border-box;}</style></head><body><div class="box"><div class="main"><div class="top"><span>默认JSON数据</span><button id="exportBtn">导出数据</button></div><pre class="show-json" id="exportBox"></pre></div><div class="main"><div class="top"><input type="file" name="file" id="importBtn"></div><pre class="show-json" id="importBox" style="color: #f00;">导入的数据</pre></div></div></body><script>// 默认JSON数据const defaultData = {name: '赵二丫',age: 18,descript: '婷婷玉立',address: '河南省郑州市',iphone: '1234567788',worker: 'front-end',hobby: [{name: '动漫' }, {name: '游戏' }]}// 显示当前内容document.getElementById('exportBox').innerHTML = JSON.stringify(defaultData, null, 2);// 导出数据 --------------------------------------- Start/*** 导出JSON文件的方法，导出并直接进行下载* * @param {Object|JSONString} 传入导出json文件的数据, 格式为json对象或者json字符串* @param {String} 导出json文件的文件名称*/const exportFileJSON = (data = {}, filename = 'dataJSON.json') => {if (typeof data === 'object') {data = JSON.stringify(data, null, 4);}// 导出数据const blob = new Blob([data], {type: 'text/json' }),e = new MouseEvent('click'),a = document.createElement('a');a.download = filename;a.href = window.URL.createObjectURL(blob);a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');a.dispatchEvent(e);}// 点击导出按钮document.getElementById('exportBtn').onclick = () => {exportFileJSON(defaultData, 'example.json');}// 导出数据 --------------------------------------- End// 导入数据 --------------------------------------- Start/*** 导入数据的方法* @param {EventObject} 传入的参数为onchange的事件源event* @returns 返回为promise，then为数据，reject为报错信息*/const importFileJSON = (ev) => {return new Promise((resolve, reject) => {const fileDom = ev.target,file = fileDom.files[0];// 格式判断if (file.type !== 'application/json') {reject('仅允许上传json文件');}// 检验是否支持FileRenderif (typeof FileReader === 'undefined') {reject('当前浏览器不支持FileReader');}// 执行后清空input的值，防止下次选择同一个文件不会触发onchange事件ev.target.value = '';// 执行读取json数据操作const reader = new FileReader();reader.readAsText(file); // 读取的结果还有其他读取方式，我认为text最为方便reader.onerror = (err) => {reject('json文件解析失败', err);}reader.onload = () => {const resultData = reader.result;if (resultData) {try {const importData = JSON.parse(resultData);resolve(importData);} catch (error) {reject('读取数据解析失败', error);}} else {reject('读取数据解析失败', error);}}});}// 回显数据const showImportData = (data) => {document.getElementById('importBox').innerHTML = JSON.stringify(data, null, 4);}// 导入文件的事件document.getElementById('importBtn').onchange = (event) => {importFileJSON(event).then((res) => {console.log('读取到的数据', res);// 回显数据showImportData(res);}).catch((err) => {console.log(err);});}// 导入数据 --------------------------------------- End</script></html>
代码里边注释较为清晰，方法也可以直接拿来使用的，如果在使用过程中遇到什么问题，欢迎在评论区留言，我们一起交流。
如果对您有所帮助，还希望您能点赞关注。
