转自:https://www.cnblogs.com/gamedaybyday/p/9906542.html

使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件)

w3school <input>标签

FileReader WebAPI接口

FileSaver.js下载地址

FileSaver.js介绍

JS创建、写入、读取本地文件(txt)   (ActiveXObject 这玩意根本不能用,IE10 和 Chrome都试了)

HTML 5中的文件处理之File Writer API  (FileSaver和FileWriter都是不能直接修改保存指定文件的,只能生成一个文件,然后浏览器以"下载"的形式保存)

一、读取本地JSON文件

1. 首先使用标签<input>创建一个读取的按钮

2. 然后选择本地的json文件后使用FileReader读取json文件的内容,此时读取的结果是字符串

3. 将读取的结果字符串使用JSON.parse转为json格式,之后再使用

<div>
<input type="file" id="files"/>
</div> <script>
var inputElement = document.getElementById("files");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小:"+size);
var reader = new FileReader();//这里是核心!!!读取操作就是由它完成的。
reader.readAsText(selectedFile);//读取文件的内容 reader.onload = function(){
console.log("读取结果:", this.result);//当读取完成之后会回调这个函数,然后此时文件的内容存储到了result中。直接操作即可。 console.log("读取结果转为JSON:");
let json = JSON.parse(this.result);
console.log(json.name);
console.log(json.age);
}; }
</script>

二、JSON文件的保存

使用下面的代码进行JSON保存

1. 引入FileSaver.js文件 (可以从文章开头那去找下载链接)

2. 使用<input>标签创建一个保存按钮

2. 点击<input>标签保存时,调用saveAs方法保存json内容

1.引入js库

<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
<input type="button" id="export" value="保存"/> <script>
var button = document.getElementById("export");
button.addEventListener("click", saveHandler, false);
function saveHandler(){
let data = {
name:"hanmeimei",
age:
}
var content = JSON.stringify(data);
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "save.json");
} </script>

2.或者vue中可以直接使用require

var FileSaver = require('file-saver'); 
 let data = {
name:"hanmeimei",
age:88
}
var content = JSON.stringify(data);
var blob = new Blob([content ], {type: "text/plain;charset=utf-8"}); 
FileSaver.saveAs(blob, "hello world.txt");

js json数据保存到本地的更多相关文章

  1. pyhton 从web获取json数据 保存到本地然后再读取

    从web中获取json数据直接进行处理总认为太慢.主要是从web中获取获取数据的过程有点慢. 所以就在想 假设先利用空暇时间把json数据获取并保存到本地,然后再从本地文件里读取和操作.应该就要快非常 ...

  2. C# 结构体和List<T>类型数据转Json数据保存和读取

    C#  结构体和List<T>类型数据转Json数据保存和读取 一.结构体转Json public struct FaceLibrary { public string face_name ...

  3. 初识Scrapy——1—scrapy简单学习,伯乐在线实战、json数据保存

    Scrapy——1 目录 什么是Scrapy框架? Scrapy的安装 Scrapy的运行流程 Scrapy的使用 实战:伯乐在线案例(json文件保存) 什么是Scrapy框架? Scrapy是用纯 ...

  4. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  5. python爬虫:将数据保存到本地

    一.python语句存储 1.with open()语句 with open(name,mode,encoding) as file: file.write() name:包含文件名称的字符串; mo ...

  6. 将Json数据保存在静态脚本文件中读取

    一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo: 1.动态加载Json数据显示到前台 [HttpPost] public Ac ...

  7. android中Json数据保存方式

    package com.example.savejsonproject; import java.io.File; import java.io.FileNotFoundException; impo ...

  8. Android开发----使用 Room 将数据保存到本地数据库

    Room介绍以及不使用SQLite的原因 Room 在 SQLite 上提供了一个抽象层,以便在充分利用 SQLite 的强大功能的同时,能够流畅地访问数据库. 处理大量结构化数据的应用可极大地受益于 ...

  9. 【jmeter】将“察看结果树”中的数据保存到本地

    操作说明: 1. "察看结果树"页面,[配置]导出项: 2. "察看结果树"页面,[文件名]选框输入导出文件及路径:  3. 点击jmeter[启动]按钮,响应 ...

随机推荐

  1. pypy安装与使用

    首先安装pypy环境: yum install pypy -y yum install pypy-devel -y 然后安装pypy的pip:wget https://bootstrap.pypa.i ...

  2. python实现读取并显示图片的两种方法

    https://www.cnblogs.com/lantingg/p/9259840.html 在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片. ...

  3. Spring cloud微服务安全实战-7-11PinPoint+SpringBoot环境搭建

    微服务的最后一个组件, 调用链监控,一个请求进来以后,经过N多个微服务,例如a调用了b.b又调用了c,那么在这个过程中看到,整个的调用的链路,然后每一段调用所耗费的时间,帮你去分析你的系统如果出现瓶颈 ...

  4. 软件定义网络基础---REST API概述

    一:什么是REST API REST API是北向接口的主流设计方式 API是应用程序编程接口,是预先定义好的函数,可以供应用程序或开发人员访问调用 年 Roy Thomas Fielding 的博士 ...

  5. VS Code中配置python版本以及Python多版本

    VS Code中配置python版本VS Code十分方便配置python的版本:可以选在在本地setting.json或者全局setting.json文件中配置:python.pythonPath在 ...

  6. Bazel安装及使用入门

    Bazel [文档][https://docs.bazel.build/versions/1.1.0/bazel-overview.html] MacOS安装 brew tap bazelbuild/ ...

  7. SpringBoot+Mybatis+MySql 自动生成代码 自动分页

    一.配置文件 <!-- 通用mapper --> <dependency> <groupId>tk.mybatis</groupId> <arti ...

  8. [转载] - Entity Framework 性能优化建议

    1.对象管理机制-复杂为更好的管理模型对象,EF提供了一套内部管理机制和跟踪对象的状态,保存对象一致性,使用方便,但是性能有所降低. 2.执行机制-高度封装在EF中,所有的查询表达式都会经过语法分析. ...

  9. (三)linux 学习 --操作文件和目录

    The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap05.html 文章目录 通配符 字符范围 ` ...

  10. Java开发笔记(一百三十八)JavaFX的箱子

    前面介绍了JavaFX标签控件的用法,其中提到Label文本支持中文字体,那么它到底支持哪些中文字体呢?自然要看当前的操作系统都安装了哪些字体才行,对于中文的Windows系统,默认安装了黑体“Sim ...