JavaScript — json文件的读取与写入

应用场景

网站配置的导入与导出。当一个网站在测试服开发完成后上线到正式服，为了避免重复配置数据，采取代码的方式来减少一些不必要的人工操作。
后台接口接收的是 json 格式而不是文件格式的时候，前端可以采用文件的形式来保存这些数据，在导入导出的时候做一下文件与数据之间的转换。

导出 —— 数据写入文件保存
导入 —— 文件上传，然后读取数据

代码实现

首先需要一个上传文件的 input 框和两个按钮

<body><input type="file" accept=".json" id="file"><button id="read">读取</button><button id="write">写入</button>
</body>
<script>const file = document.getElementById('file');const readBtn = document.getElementById('read');const writeBtn = document.getElementById('write');
</script>

导入：将上传的 .json 文件中的内容读取出来，请求接口，将数据传给后台

readBtn.onclick = function () {const fileList = file.files;if (!fileList.length) {return;}const reader = new FileReader();reader.readAsText(fileList[0], "UTF-8");reader.onload = function (event) {console.log(event.target.result);}
};

导出：请求接口，将获取到的数据序列化，然后写入到 json 文件中

writeBtn.onclick = function () {// 字符内容转变成blob地址const content = JSON.stringify([{ name: '张三' }]);const blob = new Blob([content]);// 创建一个 a 标签，添加属性let eleLink = document.createElement('a');eleLink.download = "1.json";eleLink.style.display = 'none';eleLink.href = URL.createObjectURL(blob);// 触发点击，然后移除document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);
};

JavaScript — json文件的读取与写入相关推荐

json文件的读取与写入
1. 用json读取字符串文件 import json # 读取数据,我们的数据为json格式的str='''[{"name":"kingsan"," ...
C++：从json文件中读取参数/创建文件夹/位拼接
目录 1.从json文件中读取参数 2.创建文件夹 3.位运算拼接 1.从json文件中读取参数 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和xml ...
python对文件的读操作有哪些方法-Python中文件的读取和写入操作
从文件中读取数据读取整个文件这里假设在当前目录下有一个文件名为'pi_digits.txt'的文本文件,里面的数据如下: 3.1415926535 8979323846 2643383279 wi ...
python对文件的读操作方法有哪些-Python中文件的读取和写入操作
从文件中读取数据读取整个文件这里假设在当前目录下有一个文件名为'pi_digits.txt'的文本文件,里面的数据如下: 3.1415926535 8979323846 2643383279 wi ...
c# gerber文件读取_懒猪编程实例六：Visual C# 实现外部文件的读取和写入
在Visual C#的环境下,用户在打开外部文件时,有时需要读取外部文件信息中的内容,有时也需要将特定的信息内容写入到外部文件当中,那么如何来实现这些功能呢?下面我们来看一下外部文件的读取和写入方法的 ...
C语言中文件的读取和写入
C语言中文件的读取和写入注意: 1.由于C是缓冲写所以要在关闭或刷新后才能看到文件内容 2.电脑处理文本型和二进制型的不同 (因为电脑只认识二进制格式) 在C语言中写文件 //获取文件指针 FIL ...
使用Python对Dicom文件进行读取与写入的实现（pydicom 和 SimpleITK）
这篇文章主要介绍了使用Python对Dicom文件进行读取与写入的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧使用Pyd ...
Qt5笔记之Qt5插件的生成与加载及json文件的读取
一.前言 1. Qt Plugin按照应用场景分两种类型: (1)The High-Level API:用于扩展Qt本身的功能,需放在Qt安装目录下的指定目录里: (2)The Lower-Level ...
Python创建txt文件并读取与写入
Python创建txt文件并读取与写入 [PyCharm 软件内操作] 在PyCharm中创建工作目录(D:\python\test1\) 一.创建一个txt文档 # -*- coding: utf- ...
C#实现excel文件的读取、写入以及异常处理，附源码程序
C#实现excel文件的读取与写入,附源码程序说明关键代码段源程序下载地址注意事项及异常解决说明通过OleDB方式,对execl文件进行读取.写入操作. 注:网上很多类似的代码,但是代码中 ...

JavaScript — json文件的读取与写入

应用场景

代码实现

JavaScript — json文件的读取与写入相关推荐

最新文章

热门文章