HTML5实现本地JSON文件的读写
参考:
使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件)
JS创建、写入、读取本地文件(txt) (ActiveXObject 这玩意根本不能用,IE10 和 Chrome都试了)
HTML 5中的文件处理之File Writer API (FileSaver和FileWriter都是不能直接修改保存指定文件的,只能生成一个文件,然后浏览器以"下载"的形式保存)
想用Egret来做地图编辑器来着,需要打开地图配置,编辑地图后,再保存地图配置。
所以去网上搜了一圈json的读取和保存方法。
一、读取本地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>
实际操作步骤
使用<input>标签创建的按钮如下图
点击“选择文件”,打开本地test.json文件,test.json内容如下图:
读取后console.log输出结果如下:
二、JSON文件的保存
网上搜了一圈,有个new ActiveXObject("Scripting.FileSystemObject");方法,但是没有什么用。
使用下面的代码进行JSON保存
1. 引入FileSaver.js文件 (可以从文章开头那去找下载链接)
2. 使用<input>标签创建一个保存按钮
2. 点击<input>标签保存时,调用saveAs方法保存json内容
<script type="text/javascript" src="./js/FileSaver.js" charset="utf-8"></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:88
}
var content = JSON.stringify(data);
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "save.json");
} </script>
实际操作步骤
<input>标签创建保存按钮
浏览器提示下载save.json文件
下载保存后的文件
三、疑问
1. 为什么保存的时候不能直接保存打开的json文件,还需要"下载"这一步。
我没有去深究,估摸着这是安全权限问题,因为如果浏览器能任意修改你电脑上的文件,那是比较可怕的。
2. 在Egret中如何使用
首先这些input标签必须创建在egret的div之前
然后这些标签必须得隐藏起来,不然会盖在游戏canvas只上,很难控制显示和隐藏
<input type="file" id="files" style="display:none"/>
因为标签按钮被隐藏了你没法点,在Egret里用代码控制<input>主动调用click事件,来触发打开文件和保存的操作,这样比较灵活。
//打开本地文件
private onOpenFile(){
var files= document.getElementById("files");
files.onchange = this.onChang;
files.click();
} //选定本地文件
private onChang(){
//获取打开的文件,并进行操作
var files: any = document.getElementById("files");
var file = files.files[0];
}
HTML5实现本地JSON文件的读写的更多相关文章
- Angular 通过 $http.post 写入本地 JSON 文件
最近在练习使用 Angular,在实现 $http 对本地 JSON 文档读写的时候遇到了问题. 问题 使用 GET 方法成功将 JSON 文档的内容读出来:但是在使用 POST 插入本地 JSON ...
- 访问本地json文件因跨域导致的问题
我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...
- 读取本地json文件,并转换为dictionary
// 读取本地JSON文件 - (NSDictionary *)readLocalFileWithName:(NSString *)name { // 获取文件路径 NSString *path = ...
- jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
- 第三天,爬取伯乐在线文章代码,编写items.py,保存数据到本地json文件中
一. 爬取http://blog.jobbole.com/all-posts/中的所有文章 1. 编写jobbole.py简单代码 import scrapy from scrapy. ...
- JavaScript读取本地json文件
JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...
- vue 模拟后台数据(加载本地json文件)调试
首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...
- 将Chrome调试器里的JavaScript变量保存成本地JSON文件
我写了一个系列的文章,主要用来搜集一些供程序员使用的小工具,小技巧,帮助大家提高工作效率. 推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diag ...
- 读取本地json文件,转出为指定格式json 使用Base64进行string的加密和解密
读取本地json文件,转出为指定格式json 引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件StreamReader sr = ...
随机推荐
- EBS测试环境DataGuard配置
1.环境信息 primary数据库(必须运行在归档模式) ip 127.71.28.71 sid test db_unique_name test log_mode archivelog force_ ...
- DataGuard---->备库参数db_file_name_convert和log_file_name_convert的作用
一.参数说明 [1] db_file_name_convert db_file_name_convert 主数据库和备用数据库的数据文件转换目录对映(如果两数据库的目录结构不一样),如果有多个对映,逐 ...
- 〖Java〗Eclispe安装和使用viplugin
习惯了VIM的操作,每次打开Eclipse都习惯性的按下 hjkl: 感觉蛋疼了使用一下VIPlugin,发现给编码速度造成了成吨的伤害- 这个插件对于习惯于使用VIM的程序员来说,简直太有必要了.. ...
- CucumberPeople 1.3.2 发布
CucumberPeople 网站: http://alterhu.github.io/CucumberPeople/ This eclipse plugin based on RubyMine ,a ...
- http头文件User-Agent详解【转载】
原文地址:http://blog.csdn.net/andybbc/article/details/50587359 http头文件User-Agent详解 什么是User-Agent User-Ag ...
- MapReduce实现矩阵乘法
简单回想一下矩阵乘法: 矩阵乘法要求左矩阵的列数与右矩阵的行数相等.m×n的矩阵A,与n×p的矩阵B相乘,结果为m×p的矩阵C.具体内容能够查看:矩阵乘法. 为了方便描写叙述,先进行如果: 矩阵A的行 ...
- Jmeter发送Json请求
jmeter发送的post请求,可以是json请求,和普通的post请求稍微有点区别,那么怎么用jmeter发送json请求呢? 首先要找一个json请求的例子,这个例子是携程网搜索机票, 网址为:h ...
- Atitit 开发进度 开发效率提升解决方案
Atitit 开发进度 开发效率提升解决方案 1.1. 使用4gl语言 dsl语言尽可能 1 1.2. Ssd+高屏幕显示器,提升硬件 1 1.3. 汉字命名规范,可以大力提升可读性与效率 1 1. ...
- 【ARM】arm系列知识框架
[ARM编程模型] 硬件: 电路原理图 软件: 体系结构, 指令集, 寄存器组 [ARM编程技术] 汇编/C语言 编译, 链接, 烧写和调试 windows: MDK linux : gcc [AR ...
- Asp.Net AutoMapper用法
1.AutoMapper简介 用于两个对象映射,例如把Model的属性值赋值给View Model.传统写法会一个一个属性的映射很麻烦,使用AutoMapper两句代码搞定. 2.AutoMapper ...