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);

};

}

实际操作步骤

使用标签创建的按钮如下图

efff51322a3fa8cd500a433fb87f0f89.png

点击“选择文件”,打开本地test.json文件,test.json内容如下图:

d0c574d7e40330d1f2084d0e3f8a5ca9.png

读取后console.log输出结果如下:

7a2cfa6e59d6cc06a69e4bc8c4bce552.png

二、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");

}

实际操作步骤

标签创建保存按钮

605273ac937fd649487fda7e3677581a.png

浏览器提示下载save.json文件

1abded8e57e062ff8a2296f180e8b5d4.png

下载保存后的文件

a3655d6510ca230459f67ca18e9fb652.png

06d433fc0ef85e030ab150fc68a2d5d0.png

三、疑问

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];

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue取消eslint语法限制

启动vue项目的时候经常报一大堆错误、但是不影响项目运行、 这是因为vue对语法的限制过于严格造成的 > bblee-app1.0.0 dev /Users/bianlifeng/my-project > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js95% emitting …

html5中figure怎么用,figure 和 figcaption 元素的正确使用方式

figure和figcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧。figure元素经常用于图片,如下所示:figure元…

Web前端期末大作业-响应式艺术培训机构网页设计(bootstrap+HTML+CSS+JavaScript+)实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java奥斯卡】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 文末获取源码联系 🍅 临近期末,…

Java毕业设计--健康推广管理系统项目实战【Springboot+mybatis+layui等实现】

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#x…

为计算机新建一个用户,win10

怎样在安装Win10系统时不创建Microsoft账户怎样在安装Win10系统时不创建Microsoft账户 在安装Win10系统的过程中,最让用户困扰的估计就是安装过程的最后一个步骤:登陆Microsoft账户。很多用户既没有Microsoft账户,也不想用它登陆系统&#xf…

Web前端期末大作业--响应式美女健身教练瑜伽馆网页设计(HTML+CSS+JavaScript+)实现

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java奥斯卡】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我,都给你】 🍅 文末获取源码联系 🍅 临近期末,…

Java经典课程设计--在线蛋糕商城销售网站项目【SpringMvc+mybatis+bootstrap等实现】

🍅 作者主页:Java李杨勇 🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 临近学期结束&#x…

Web前端期末大作业--绿色自适应医疗健康医院网页设计(HTML+CSS+JavaScript+)实现

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏👇🏻👇&…

修复计算机的英语,Windows Repair最新版

Windows Repair是一个全能型的电脑系统修复工具,能将你的windows恢复到初始设置。可以帮你解决诸如注册表权限问题、ie、自动更新、防火墙等等一系列故障。【功能特点】1、系统自动修复:用它可以智能安全地自动修复被非法软件篡改的系统设置,…

SpringBoot配置图片虚拟映射

1. 新建一个MyWebAppConfigurer 配置静态资源需要映射的位置、建议把addResourceLocations的路径写在application.yml中、方面以后部署的打包修改配置文件的时候做外部配置文件加载、方面修改。这边为了节约时间就在代码中写了。 package io.renren.config; import org.springf…

计算机回收站怎么设计无法删除,电脑回收站中ai文件删不掉如何解决? ai文件在回收站删不掉的解决办法...

电脑回收站中ai文件删不掉该怎么办?在清理电脑回收站的时候,发现很多.ai文件都删不掉,粉碎也不行,这是怎么回事?下面我们来看看ai文件在回收站删不掉的解决办法,具体内容如下一些做平面设计的用户可能会在网…

mysql-修改密码(error-1290 (HY000): The MySQL server is running with the --skip-grant-tables option so)

执行:flush privileges; mysql 新设置用户或更改密码后需用flush privileges刷新MySQL的系统权限相关表,否则会出现拒绝访问或修改操作。

Windows远程文件拷贝openEuler--WinSCP

由于最近项目迁移到openEuler操作系统上去了、需要部署安装项目、各种软件环境安装、资料拷贝复制等、记得以前用过WinSCP进行远程数据拷贝。今天就简单记录下使用方法。 百度百科介绍: WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时支持SCP协议。…

Vue+Element+Springboot实现图片上传

最近没事刚好练习下vuespringboot前段后分离的项目、用上了图片上传功能、记录一下。 前端待提交的表单部分代码。 <el-form-item label"封面图片"><el-upload v-model"dataForm.title"class"avatar-uploader":limit"1"list-…

sql server 2008表中计算机,电脑删除SQLsever2008表格数据出现“不能删除”怎么办

SQLsever2008专门用于大批量的数据存储和管理,适合服务器数据管理&#xff0c;电脑在编辑或删除总会出现一些故障问题。这不一些用户说电脑删除SQLsever2008表格数据出现“不能删除”遭到阻止&#xff0c;怎么办&#xff1f;不要紧张&#xff0c;参考下文教程设置一下即可。具体…

酒店三合一终端服务器,【MOXA NPort6650-8八口三合一信号安全终端服务器价格_MOXA NPort6650-8八口三合一信号安全终端服务器厂家】- 网络114...

简介NPort 6600专为那些需要通过网络实现集中监控的串口设备而设计。目前已经推出8/16/32串口终端服务器。一旦大量 串口设备接入以太网络时&#xff0c;数据传输的安全性就变的十分重要。NPort 6600为计算机和串口设备之间的通信提供了功能强大的加密机制&#xff0c;如当今的…

js文件夹上传到服务器,js 上传img到服务器

jQuery插件之ajaxFileUpload前端视图&#xff0c;HTML与JS代码&#xff0c;成功上传后&#xff0c;返回图片真实地址并绑定到的SRC地址lt;head>lt;script src"/jquery-1.7.1.js"type"text/javascript">lt;script>lt;script src"/...文章wenv…

基于java+Springboot操作系统教学交流平台详细设计实现

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &#x1f345;文末获取源码联系&#x1f345; 功能设计和技术&#x…

只在当前页面生效的css样式,修改页面中的一个样式 仅在当前页面生效

问题描述校验的提示框出现在其他位置 怎么修改问题出现的环境背景及自己尝试过哪些方法尝试直接修改 样式 会修改掉全局的样式 怎么让这个样式仅在当前页面生效相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码):rules"[ {required: true,validator:isContainerQtyE…

程序员也可以很浪漫--精选10个圣诞节特效网页设计-前端HTML+CSS等实现

最近离圣诞节不远了、整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家、直接上效果吧。 视频演示&#xff1a;点击查看完整视频演示 》》》 html5基于svg绘制调皮圣诞老人&#xff1a; <![CDATA[import url(https://fonts.googleapis.com/css?familyLuckies…