js json数据保存到本地
转自:https://www.cnblogs.com/gamedaybyday/p/9906542.html
使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件)
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数据保存到本地的更多相关文章
- pyhton 从web获取json数据 保存到本地然后再读取
从web中获取json数据直接进行处理总认为太慢.主要是从web中获取获取数据的过程有点慢. 所以就在想 假设先利用空暇时间把json数据获取并保存到本地,然后再从本地文件里读取和操作.应该就要快非常 ...
- C# 结构体和List<T>类型数据转Json数据保存和读取
C# 结构体和List<T>类型数据转Json数据保存和读取 一.结构体转Json public struct FaceLibrary { public string face_name ...
- 初识Scrapy——1—scrapy简单学习,伯乐在线实战、json数据保存
Scrapy——1 目录 什么是Scrapy框架? Scrapy的安装 Scrapy的运行流程 Scrapy的使用 实战:伯乐在线案例(json文件保存) 什么是Scrapy框架? Scrapy是用纯 ...
- vue中引入json数据,不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- python爬虫:将数据保存到本地
一.python语句存储 1.with open()语句 with open(name,mode,encoding) as file: file.write() name:包含文件名称的字符串; mo ...
- 将Json数据保存在静态脚本文件中读取
一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo: 1.动态加载Json数据显示到前台 [HttpPost] public Ac ...
- android中Json数据保存方式
package com.example.savejsonproject; import java.io.File; import java.io.FileNotFoundException; impo ...
- Android开发----使用 Room 将数据保存到本地数据库
Room介绍以及不使用SQLite的原因 Room 在 SQLite 上提供了一个抽象层,以便在充分利用 SQLite 的强大功能的同时,能够流畅地访问数据库. 处理大量结构化数据的应用可极大地受益于 ...
- 【jmeter】将“察看结果树”中的数据保存到本地
操作说明: 1. "察看结果树"页面,[配置]导出项: 2. "察看结果树"页面,[文件名]选框输入导出文件及路径: 3. 点击jmeter[启动]按钮,响应 ...
随机推荐
- [内网渗透]HASH获取与HASH传递
0x01 PTH简介 PTH,即Pass-The-Hash,首先我们来说下为什么要使用HASH传递,一是在目标机>=win server 2012时,lsass.exe进程中是抓不到明文密码的, ...
- 【2019.11.18】SDN阅读作业
为什么需要SDN?SDN特点? 随着网络的快速发展,传统互联网出现了如传统网络配置复杂度高等诸多问题,这些问题说明网络架构需要革新,可编程网络的相关研究为 SDN 的产生提供了可参考的理论依据 SDN ...
- 各种系统性能优化技术,采用vilocity实现商品页面静态化
1.大型门户网站系统:>10万的访问量 行业网站(当当网,卓越网):20万-30万,一个小时内会跟数据库的交互至少20万-30万,会产生数据库瓶颈,每个数据库都有一个最大连接数(socket ...
- photoshop 的安装破解
最近学习需要用到photoshop,但是photoshop试用期只有30天,于是尝试破解photoshop.参考了网上的很多博客,失败了好几次,终于找到一篇靠谱的博客,很顺利的成功了.在这里记录一下, ...
- html5 css3 背景视频循环播放代码
<div style ="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; ...
- 2019_软工实践_Beta收官
简介 组名:955 组长博客:点这里! 成员 031702329庄锡荣(组长) 031702309林晓锋 031702309侯雅倩 031702311陈珊珊 171709030吴珂雨 03170231 ...
- Fiddler导出JMX文件配置
(1)安装fiddler jmeter(免安装) 注意事项!fiddler版本必须在v4.6.2以上(插件支持的是4.6版本), jmeter版本最好在v3.0以上,版本太低容易导致导出不成功 这里我 ...
- [代码质量] 代码质量管控 -- 复杂度检测 (JavaScript)
转载自: https://juejin.im/post/59bb8b546fb9a00a4247532e 背景 代码的复杂度是评估一个项目的重要标准之一.较低的复杂度既能减少项目的维护成本,又能避免一 ...
- [转]OpenGL图形渲染管线、VBO、VAO、EBO概念及用例
直接给出原文链接吧 1.OpenGL图形渲染管线.VBO.VAO.EBO概念及用例 2.OpenGL中glVertex.显示列表(glCallList).顶点数组(Vertex array).VBO及 ...
- SDN实验---Ryu的应用开发(一)Hub实现
补充: (一)Ubuntu下安装Notepadqq 背景:为什么安装Notepadqq Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组.但是可惜的是N ...