在浏览器端，打开本地 html 文件，执行 JavaScript 修改本地文件内容的方式，有什么方式么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1628 天前的主题，其中的信息可能已经有所发展或是发生改变。

浏览器为了用户安全考虑，不让 JavaScript 修改本地文件内容，

但是我只想在本地用浏览器打开本地的一个 html 文件，在打开后的 html 界面点击按钮，执行某个功能，该功能是用 js 代码修改本地文件内容，这个有没有方法？必须要 node.js 么？

比如我想载浏览器端打开 html 文件，点击按钮修改一个相对于打开的 html 文件中同目录下的.json 文件内容。有什么好方法么。必须要用 ie 或 node.js ？谷歌，火狐不行么？需要什么配置么？或者 js 有什么数据库么？能在浏览器端打开一个本地 html 文件，执行 js 代码就能增删改查？

我想制作一些基于浏览器端打开本地 html 文件，就能执行的脚本应用，需要用本地持久化功能，所以想要用 JavaScript 。不考虑跨平台。windows 就行。

第 1 条附言 · 2020-06-15 14:25:43 +08:00

我个人使用

HTML

文件

浏览器

打开

39 条回复 • 2021-12-12 05:34:52 +08:00

XanderChen

2020-06-14 10:22:33 +08:00

没有，不行，必须上框架。

想啥呢！

musi

2020-06-14 10:23:43 +08:00 via iPhone

不知道 FileReader 适不适合你

miniwade514

2020-06-14 10:24:23 +08:00 via iPhone

可以查一下 Chrome 插件 API 文档，看有没有相关接口。正常网页肯定不能直接写文件的。

whypool

2020-06-14 10:28:14 +08:00

可以的，但是只能 file 方式打开，可以用 reader 读取相对路径资源

duan602728596

2020-06-14 10:28:22 +08:00 via iPhone

别问，问就是 electron 和 nwjs 。浏览器不能修改本地文件，这是底线

noe132

2020-06-14 10:30:51 +08:00

假设浏览器能够在没有你的允许下访问你的本地文件，这样的浏览器你敢用吗？

xiaoming1992

2020-06-14 10:31:19 +08:00 via Android

利用 Blob 生成一个 json 文件，下载覆盖原来的 json 就好了

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

cw2k13as

2020-06-14 10:54:27 +08:00

必须要 node 啊，看了你的需求可以曲线救国，先导入再编辑再导出？？？

SuperMild

2020-06-14 10:59:39 +08:00

electron 就是因为解决了这个问题，所以才会这么火。

首先因为用 html 、js 来写界面非常方便，因此会有很多人想这样做，然后正如上面有人所说浏览器如果允许这个功能，这个浏览器就没人敢用了，因此才会冒出来一个 electron 。

cmdOptionKana

2020-06-14 11:12:29 +08:00

浏览器自带数据库，但是只能临时用，不能持久化。持久化可以用导出 json 的方法，这里有个例子 /t/648561

shansing

2020-06-14 11:26:04 +08:00

不行，浏览器不能无限制读写用户本地文件。如果要用 Web API 操作文件，必须是用户所选文件才行（使用 input[type="file"] 或者拖拽）。也不能直接写回。我毕设做了类似的东西，是弹出对话框让用户下载，从而达到保存的目的。

如果是本地持久化，考虑 LocalStorage ？

shansing

2020-06-14 11:39:19 +08:00

*如果不怕非标准化的 API，倒是有 FileWriter 之类的东西。

meathill

2020-06-14 12:05:42 +08:00

如果不是非要保存到本地文件系统，可以考虑直接写到 localStorage 里，空间不够的话用 indexedDB 。然后用户想导出的时候，再利用 `<a download>` 触发下载。

tctc4869

2020-06-14 12:13:02 +08:00

@noe132
@SuperMild
我打开的是我本地的 html 文件，又不是网络请求渲染的 html 。这都不行么？

buffzty

2020-06-14 12:14:19 +08:00

首先你要安装你自己的一个软件.并新建一个协议. 然后在 html 中 a 标签的链接改为 youapp://xxx?a=1&b=2 调用本地 exe 程序去执行代码浏览器是个沙盒 ,他不开放你只能在他里面做事

Jirajine

2020-06-14 12:23:44 +08:00 via Android

直接套 electron

DOLLOR

2020-06-14 13:06:21 +08:00

结论：不行。
浏览器的 JS 是运行在沙箱里的，不能随意访问用户的本地存储设备。能够满足你这种需求的浏览器，都因为安全问题被淘汰了。比如当年的 IE 浏览器，访问一个网站，就能往你的硬盘读写东西，非常可怕。

所以，现代浏览器，要有用户的授权，才能允许你从硬盘读取或写入文件。那就是打开对话框和保存对话框。
借助<input type="file">和 fileReader，你可以在用户授权的情况下读取硬盘里的文件。
然后借助<a download>，把修改后的文件写入磁盘。

当然，浏览器还提供了 localStorage 、sessionStorage 、IndexedDB 这些持久化或临时存储，保存在浏览器的沙箱里，浏览器以外是看不到的。

如果你想像应用程序一样随意读写硬盘，就不能只靠浏览器了，得上 node.js 或 electron 。

参见：
[https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications] 的 Accessing selected file(s)，

[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a] 的 Using the download attribute to save a <canvas> as a PNG 。

DOLLOR

2020-06-14 13:43:17 +08:00

<textarea style="width: 90%;height: 300px;"></textarea>
<br>
<input type="file">
<a href="#" download="">保存</a>
<script>
document.querySelector('input[type=file]').addEventListener('change', function () {
let file = this.files[0];
let fr = new FileReader();
fr.readAsText(file);
fr.onload = function () {
document.querySelector('textarea').value = this.result;
document.querySelector('a[download]').download = file.name;
};
});

document.querySelector('a[download]').addEventListener('mouseover', function () {
this.href = 'data:text/plain,' + encodeURIComponent(document.querySelector('textarea').value);
});
</script>

Vegetable

2020-06-14 13:52:22 +08:00

读文件可以实现，下载修改过的文件也可以实现，唯独是修改现有文件无法实现。前两个用户点两下能操作的，第三个是无论如何也没办法直接实现的。

Lightbright

2020-06-14 14:00:14 +08:00 via Android

国际主流浏览器是无论如何也不可能有提供修改本地文件的接口的，甚至如果你找到了这样的 BUG，可以直接向 Chrome 提供反馈，得到美金奖励。

imn1

2020-06-14 14:03:13 +08:00

不是本地但近似本地的方法有一个：
本机 webdav

azh7138m

2020-06-14 14:35:54 +08:00 via Android

可以
https://web.dev/native-file-system/

native File System 已经整了很久了，楼上为啥没人提到？

soulmt

2020-06-14 15:50:10 +08:00

上 chrome 83

jinliming2

2020-06-14 17:24:50 +08:00

对，22 楼提到的 native File System 就是用来读写本地文件的，但是目前只是体验功能，需要手动开启。
开启后页面申请单个文件或是整个目录的访问权限，就可以直接读写了。

DoodleSit

2020-06-14 17:55:33 +08:00

windows 上，html 改后缀 hta （猜想的），或者使用 ActiveObjectX

xiangyuecn

2020-06-14 19:05:11 +08:00

搞个文件系统的 http 接口，建 3 个文件：
1. 你的.html：自己写一个纯前端界面，双击就能活蹦乱跳那种
2. http-filesystem.js：自己写一个 nodejs 文件，封装本地文件系统功能提供 http 访问接口，目录（+元数据）、读取、写入、删除 4 个实现就够了
3. 运行.bat：打开上面两个文件：浏览器打开 html 、nodejs 服务运行

从此想怎么搞就怎么搞。

楼上那几个方法都不错，用 electron 、chrome 试验特性这些。不过自己扩展一下古董 IE 也是不错的，提供文件读写 js 接口。我前段时间就写的一个 exe，调用 WebBorwser （ IE11 ），让 js 读写文件、连接 mysql，不过文件目录功能没有搞，现在手动提供文件路径，好玩

app 本身不大 200kb，但是是专门用来处理 gis 数据的，gdal 库几十 M： https://xiangyuecn.github.io/AreaCity-JsSpider-StatsGov/assets/AreaCity-Geo-Transform-Tools.html#xz

beastk

2020-06-15 08:05:19 +08:00 via iPhone

ie 本地可以

myCupOfTea

2020-06-15 08:55:43 +08:00

如果你能接受每次读取,更新必须弹出一个文件管理器窗口让客户点击,那就或许可以

alore

2020-06-15 09:03:49 +08:00

把 html 后缀改成 hta 试试。或者搜索下 hta 。只能使用 IE，并且对版本可能有要求。

asdjgfr

2020-06-15 09:07:58 +08:00

用 node 打包一个后台服务，直接双击启动就行了

ruanimal

2020-06-15 09:47:17 +08:00

firfox 开发者版本是可以的

g00001

2020-06-15 14:11:06 +08:00

windows 上用 aardio 做这事很方便，生成的 EXE 非常小，接口也很简单，javascript 里可以调用本地函数，可以支持系统自带的 Chromium 内核浏览器，也可以支持系统自带的 IE 控件。

tctc4869

2020-06-15 14:26:27 +08:00

@ruanimal 使用了火狐开发者模式的话，那么 js 读取文件用哪个 js 库呢？直接读 sqlite 可不可以？

ruanimal

2020-06-15 16:49:30 +08:00

@tctc4869 不太熟，不是前段开发

ruanimal

2020-06-15 16:50:29 +08:00

@tctc4869 可以试试直接用 localstorage

Chanix34

2020-06-22 11:39:47 +08:00

我想说，我是看到这个问题才注册的 V2EX……

我有着你类似的需求，因此写了个小众的东西，axeBrowser.com ，应该可以满足你的需求。

很遗憾满足这种需求的软件肯定是小众的，而且存在严重的安全问题。一个可以装载脚本，然后突破沙盒对本地资源进行处理的浏览器，在杀毒软件看来和木马没什么区别。

tctc4869

2020-06-23 13:21:05 +08:00

@Chanix34 我个人使用，又不给别人

Chanix34

2020-06-23 21:40:15 +08:00

@tctc4869 那么 axeBrowser.com 应该可以满足你的需求，你可以试一试。我目前正在继续完善和扩展 js 可以调用的功能模块。

lleon

2021-12-12 05:34:52 +08:00 via iPhone

@ruanimal