getApplicationDocumentsDirectory浏览器失效，求网页端文件存储替代方案

针对你在Flutter Web中无法使用path_provider进行文件操作的问题，以下是几种适配浏览器环境的方案：

1. 浏览器本地存储（LocalStorage） #

适合存储小体积JSON数据（单域名一般限制5MB），操作简单无需额外权限，数据与当前域名绑定，清除浏览器缓存会丢失。

示例代码：

import 'dart:convert';
import 'dart:html';

// 保存JSON数据
void saveJson(String fileName, Map<String, dynamic> data) {
  final jsonStr = jsonEncode(data);
  window.localStorage[fileName] = jsonStr;
}

// 加载JSON数据
Map<String, dynamic>? loadJson(String fileName) {
  final jsonStr = window.localStorage[fileName];
  if (jsonStr != null) {
    return jsonDecode(jsonStr);
  }
  return null;
}

// 删除指定JSON数据
void removeJson(String fileName) {
  window.localStorage.remove(fileName);
}

2. IndexedDB #

适合存储较大体积的数据（存储上限由浏览器磁盘空间决定），支持异步操作，同样与域名绑定，清除浏览器数据会丢失。可通过idb_shim库简化操作。

首先添加依赖：

dependencies:
  idb_shim: ^2.2.0

示例代码：

import 'dart:convert';
import 'package:idb_shim/idb_shim.dart';

late Database _storageDb;

// 初始化数据库
Future<void> initStorageDb() async {
  final factory = getIdbFactory();
  _storageDb = await factory.open('app_json_storage', version: 1,
      onUpgradeNeeded: (event) {
    final db = event.database;
    db.createObjectStore('json_files');
  });
}

// 保存JSON数据
Future<void> saveJson(String fileName, Map<String, dynamic> data) async {
  final transaction = _storageDb.transaction('json_files', idbModeReadWrite);
  final store = transaction.objectStore('json_files');
  await store.put(jsonEncode(data), fileName);
  await transaction.completed;
}

// 加载JSON数据
Future<Map<String, dynamic>?> loadJson(String fileName) async {
  final transaction = _storageDb.transaction('json_files', idbModeReadOnly);
  final store = transaction.objectStore('json_files');
  final jsonStr = await store.getObject(fileName) as String?;
  await transaction.completed;
  if (jsonStr != null) {
    return jsonDecode(jsonStr);
  }
  return null;
}

// 删除指定JSON数据
Future<void> removeJson(String fileName) async {
  final transaction = _storageDb.transaction('json_files', idbModeReadWrite);
  final store = transaction.objectStore('json_files');
  await store.delete(fileName);
  await transaction.completed;
}

3. 用户手动文件下载/上传 #

如果需要让用户将数据保存到本地磁盘，或从本地导入数据，适合数据备份、迁移场景，数据由用户自行保管，不受浏览器缓存影响。

示例代码：

import 'dart:convert';
import 'dart:html';

// 将JSON数据下载为本地文件
void downloadJson(String fileName, Map<String, dynamic> data) {
  final jsonStr = jsonEncode(data);
  final blob = Blob([jsonStr], 'application/json');
  final url = Url.createObjectUrlFromBlob(blob);
  final anchor = AnchorElement(href: url)
    ..setAttribute('download', '$fileName.json')
    ..click();
  Url.revokeObjectUrl(url);
}

// 选择本地JSON文件并加载数据
Future<Map<String, dynamic>?> pickAndLoadJson() async {
  final input = FileUploadInputElement()..accept = 'application/json';
  input.click();
  await input.onChange.first;
  if (input.files?.isEmpty ?? true) return null;
  final file = input.files!.first;
  final jsonStr = await file.text();
  return jsonDecode(jsonStr);
}

4. 云存储（配合后端服务） #

如果需要跨设备同步数据或长期安全存储，可配合后端云存储服务（如自建服务器、云厂商存储服务）。通过HTTP接口将JSON数据上传到后端保存，需要时从后端下载，数据安全性高且支持多设备访问，但依赖网络连接。

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