當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript — json文件的读取与写入
生活随笔
收集整理的這篇文章主要介紹了
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文件的读取与写入的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： springmvc 结合ajax批量新增
- 下一篇： 人工操作阶段计算机是如何工作的,管理信息