html5 写json 文件,HTML5实现本地JSON文件的读写
参考:
使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件)
JS创建、写入、读取本地文件(txt) (ActiveXObject 这玩意根本不能用,IE10 和 Chrome都试了)
HTML 5中的文件处理之File Writer API (FileSaver和FileWriter都是不能直接修改保存指定文件的,只能生成一个文件,然后浏览器以"下载"的形式保存)
想用Egret来做地图编辑器来着,需要打开地图配置,编辑地图后,再保存地图配置。
所以去网上搜了一圈json的读取和保存方法。
一、读取本地JSON文件
1. 首先使用标签创建一个读取的按钮
2. 然后选择本地的json文件后使用FileReader读取json文件的内容,此时读取的结果是字符串
3. 将读取的结果字符串使用JSON.parse转为json格式,之后再使用
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);
};
}
实际操作步骤
使用标签创建的按钮如下图
点击“选择文件”,打开本地test.json文件,test.json内容如下图:
读取后console.log输出结果如下:
二、JSON文件的保存
网上搜了一圈,有个new ActiveXObject("Scripting.FileSystemObject");方法,但是没有什么用。
使用下面的代码进行JSON保存
1. 引入FileSaver.js文件 (可以从文章开头那去找下载链接)
2. 使用标签创建一个保存按钮
2. 点击标签保存时,调用saveAs方法保存json内容
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");
}
实际操作步骤
标签创建保存按钮
浏览器提示下载save.json文件
下载保存后的文件
三、疑问
1. 为什么保存的时候不能直接保存打开的json文件,还需要"下载"这一步。
我没有去深究,估摸着这是安全权限问题,因为如果浏览器能任意修改你电脑上的文件,那是比较可怕的。
2. 在Egret中如何使用
首先这些input标签必须创建在egret的div之前
然后这些标签必须得隐藏起来,不然会盖在游戏canvas只上,很难控制显示和隐藏
因为标签按钮被隐藏了你没法点,在Egret里用代码控制主动调用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 文件,HTML5实现本地JSON文件的读写相关推荐
- JS 变量保存为本地json文件,读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
- python stl文件_打开本地STL文件并创建webgl使用的geometry
需求 打开本地STL文件 一个独立基于webgl的viewer,会被别的网站重用 将打开文件的数据传输给viewer,并且在文件加载的时候显示进度条 解决方案 #1可以使用传统的html5 api来打 ...
- 服务器上文件导出到本地,服务器文件导出到本地
服务器文件导出到本地 内容精选 换一换 您可以将当前帐号下拥有的所有裸金属服务器信息,以CSV文件的形式导出至本地.该文件以"裸金属服务器-区域-当前日期"命名,记录了裸金属服务器 ...
- python读取本地文件-python解析本地HTML文件
Python使用爬虫技术时,每运行一次,本地都会访问一次主机.为避免完成程序前调试时多次访问主机增加主机负荷,我们可以在编写程序前将网页源代码存在本地,调试时访问本地文件即可.现在我来分享一下爬取资料 ...
- 电脑托文件到服务器,本地电脑文件拖入云服务器
本地电脑文件拖入云服务器 内容精选 换一换 在SAP HANA系统中,需要创建一台弹性云服务器,用于作为NAT Server,用户可通过访问该服务器后,再通过ssh协议跳转到SAP HANA节点进行故 ...
- android studio中存放json文件,获取assets文件下下文件,获取本地json文件并解析
转自http://blog.csdn.net/yanxiaosa/article/details/70859927 以前看过这些知识,今天用到的时候,发现自己忘记了,都不知道assets文件夹在哪个目 ...
- vue本地下载文件,解决ie浏览器本地下载文件无反应(已解决);vue-cli2本地下载文件,vue-cli3本地下载文件
1.vue-cli2+vue 注意:vue-cli2本地文件需要放在静态文件static下 <a href="javascript:void(0);" @click=&quo ...
- Git 删除本地commit未push文件 ,push本地commit文件
1,起因 在push文件的时候, push了一个大家伙,有400M, 但是push要求单个文件大小不能超过200M 所以,这个大家伙已经进行本地commit,但又不能push上去, 导致在这之后需要p ...
- jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
- python在linux上面下载文件以及文件夹到本地时候本地文件夹报PermissionError: [Errno 13] Permission denied的解决办法
python报PermissionError: [Errno 13] Permission denied 重现步骤: 1.上班 2.洗杯子,大杯美式咖啡,准备一天的工作 3.程序由10个组件组成,每次 ...
最新文章
- java string blog_StringUtils方法全集
- 有这10个特征的项目领导者做的项目,失败率增加60%
- HDU1231(DP)
- WPF中通过AForge实现USB摄像头拍照
- Python locals 函数 - Python零基础入门教程
- layui单选框verify_layui 单选框选中事件
- python如何调用文件进行换位加密_文件加密---使用换位加密和解密方法加密文件...
- python编写图片主色转换脚本
- [JZOJ100047] 【NOIP2017提高A组模拟7.14】基因变异
- 【uTenux实验】中断处理
- 计算机机械硬盘容量怎么看,win10系统硬盘容量怎么看?一招查看win10硬盘容量的方法...
- 文化财经SAR指标计算(二)
- Linux编程学习笔记-多进程编程
- Excel模糊查找+数据透视
- 均匀分布、正态分布、二项分布、泊松分布、指数分布
- 考研二阶矩阵合同的计算
- 他把自己估值上万亿美元的项目免费化了.....
- python display 报错_Python中的函数(三)
- 机器学习笔记~图像的空间分辨率
- 微软最走运、最倒霉的十个瞬间 1
热门文章
- pythonweb框架_浅谈python web三大框架
- obs多推流地址_苹果手机IOS系统:抖音+易推流直播手机游戏——墨涩网
- 移除apt源_apt提示处理归档 (--unpack)时出错的解决办法
- 机械臂中的四元素转为旋转矩阵_雅克比矩阵(上)雅克比推导
- linux 内核io操作,关于Linux内核中的异步IO的使用
- php mysql随机记录_php随机取mysql记录方法小结
- Win11系统怎么取消登录密码 Win11取消登录密码图文教程
- 中关村win11 32位官方原版iso文件v2021.08
- 爱奇艺视频如何联系客服?爱奇艺联系客服攻略
- python拼写_python 拼写检查器