网友回复
使用浏览器的文件api实现,完整代码如下:
<!DOCTYPE html> <html> <head> <script src="//repo.bfw.wiki/bfwrepo/js/eruda.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> body{ padding: 10px; } </style> </head> <body> <p><button id="openlocalfile">打开本地文件</button> <button id="savetolocalfile">保存到本地</button>不要在iframe中打开</p> <textarea id="editor" style="width:100%;height:400px;"></textarea> <script> const openbtn = document.getElementById('openlocalfile'); const editor = document.getElementById('editor'); const savebtn = document.getElementById('savetolocalfile'); let fileHandle; openbtn.addEventListener('click', async () => { [fileHandle] = await window.showOpenFilePicker(); const file = await fileHandle.getFile(); const contents = await file.text(); editor.value = contents; }); savebtn.addEventListener('click', async () => { if(fileHandle==null){ alert("请先打开一个本地文件后进行修改"); return; } const writable = await fileHandle.createWritable(); // Write the contents of the file to the stream. await writable.write(editor.value); // Close the file and write the contents to disk. await writable.close(); alert("修改本地文件成功"); }); </script> </body> </html>