本地纯客户端HTML如何实现contenteditable内容存文件跨用户读取

纯file://协议直接打开HTML的场景下，浏览器安全沙箱禁止前端JS静默写入本地文件，不存在完全无感知自动写本地txt的纯前端方案，但有两种可落地的适配方案，完全满足离线共享、批注随文件夹同步、后续可平滑迁移服务端的需求，不需要启动本地服务、不需要联网。

基于File System Access API实现，仅需用户首次打开时授权一次报表根目录的读写权限，后续所有保存、加载操作全自动完成，和预期逻辑完全一致。

实现逻辑 #

• 提前为每个子页面配置固定唯一UID，例如graphic1.html的UID直接设为graphic1，硬编码在页面JS中
• 在报表根目录下新建annotations文件夹，所有批注txt统一存在该目录下，命名规则为${UID}.txt
• 页面首次加载时，弹出目录选择框，让用户选中整个报表的根文件夹，申请持久化读写权限，权限会存在浏览器中，后续打开不需要重复授权
• 监听可编辑框的blur事件（离开编辑区域）、保存按钮点击事件，触发时自动将编辑内容写入对应路径的txt文件，无需用户手动选择保存位置
• 页面每次打开时，自动读取对应UID的txt文件内容，填充到可编辑框中
• 共享文件夹时，annotations目录下的txt会随整个目录一起分发，其他用户拿到文件夹后仅需首次打开时选一次根目录授权，就能看到所有历史批注，编辑后也会自动更新对应txt文件

核心参考代码 #

把下面这段代码加到每个子页面的</body>标签前即可，所有子页面仅需修改PAGE_UID的值为自身唯一ID：

<div contenteditable="true" id="annotationBox" style="width:100%;min-height:120px;border:1px solid #eee;padding:8px;"></div>
<button id="saveBtn">保存批注</button>

<script>
// 每个子页面仅需修改这个值为自身唯一UID
const PAGE_UID = 'graphic1';
let rootDirHandle = null;

// 初始化
async function init() {
  // 读取已缓存的目录权限
  const savedHandle = await navigator.storage.getDirectory();
  try {
    rootDirHandle = await savedHandle.getDirectoryHandle('reportRoot', {create:false});
    // 验证权限
    const permission = await rootDirHandle.requestPermission({mode:'readwrite'});
    if(permission !== 'granted') throw new Error('权限失效');
  } catch(e) {
    // 无有效权限时请求用户选择根目录
    alert('请选择报表根目录（root_folder）以启用批注自动保存功能');
    rootDirHandle = await window.showDirectoryPicker();
    await savedHandle.getDirectoryHandle('reportRoot', {create:true});
  }
  // 加载已有批注
  await loadAnnotation();
  // 绑定事件
  const box = document.getElementById('annotationBox');
  box.addEventListener('blur', saveAnnotation);
  document.getElementById('saveBtn').addEventListener('click', saveAnnotation);
}

// 加载批注
async function loadAnnotation() {
  try {
    const annoDir = await rootDirHandle.getDirectoryHandle('annotations', {create:false});
    const fileHandle = await annoDir.getFileHandle(`${PAGE_UID}.txt`, {create:false});
    const file = await fileHandle.getFile();
    const content = await file.text();
    document.getElementById('annotationBox').innerHTML = content;
  } catch(e) {
    // 无历史批注时忽略错误
  }
}

// 保存批注
async function saveAnnotation() {
  const content = document.getElementById('annotationBox').innerHTML;
  const annoDir = await rootDirHandle.getDirectoryHandle('annotations', {create:true});
  const fileHandle = await annoDir.getFileHandle(`${PAGE_UID}.txt`, {create:true});
  const writable = await fileHandle.createWritable();
  await writable.write(content);
  await writable.close();
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', init);
</script>

如果需要适配所有浏览器（包括Firefox、老旧版本浏览器），可以去掉自动写文件逻辑，用半自动的导入导出实现，不需要申请任何权限：

• 页面加载时，自动通过fetch请求annotations目录下对应UID的txt文件，加载历史批注（file协议下绝大多数浏览器允许读取同目录及子目录的静态文件）
• 用户编辑完成后点击保存按钮，自动触发对应txt文件的下载，用户只需要把下载的txt文件放到annotations目录覆盖原有文件即可
• 共享文件夹时只要保证annotations下的txt完整，所有用户打开页面都能看到最新批注
• 该方案缺点是保存时需要用户手动确认下载、替换文件，操作多一步，但兼容性最好，零依赖、不需要任何权限。

上述两种方案都把读写逻辑抽成了独立的loadAnnotation和saveAnnotation方法，后续迁移到服务端架构时，只需要把两个方法内的本地文件读写逻辑替换为接口请求即可，所有页面的UI、交互逻辑不需要做任何修改，改造成本极低。

root_folder
  |
  |---- index.html (访问所有子页面的主入口)
  |---- graphics
  |       |---- graphic1.html
  |       |---- graphic2.html
  |---- annotations
          |---- graphic1.txt
          |---- graphic2.txt

注意：不要尝试寻找纯前端静默写本地文件的绕过方法，所有这类方法都是利用浏览器安全漏洞实现的，会被新版本浏览器修复，且存在极大安全风险，不适合生产场景使用。

内容的提问来源于stack exchange，提问作者Alex H