将 pouchdb-load 与本地文件一起使用答案

【问题标题】：Using pouchdb-load with a local file将 pouchdb-load 与本地文件一起使用
【发布时间】：2021-02-12 23:15:33
【问题描述】：

我正在使用 react 构建一个 .html 页面，以方便访问我工作的地方的复杂本地文件系统。这需要任何人都可以编辑。我决定使用 pouchdb 来处理一个数据库，该数据库存储了我所有的按钮以及附加到它们的链接。这需要部署在多台计算机上。命令 npm run build 工作得很好，但是，按钮数据库不在计算机之间共享，因为 pouchdb 数据库存储在本地存储中。

所以我想出了一种方法来将 pouch 数据库转储到 .json 文件中。转储过程运行良好，但是当我尝试使用 pouchdb-load 插件从 .json 文件中获取数据时，出现 CORS 错误。

this.db.load('file:///./tracker.json').then(function () {
  // done loading!
  console.log(this.db)
}).catch(function (err) {
  // HTTP error or something like that
  console.log(err)
});

我得到一个与 CORS 错误相关的未定义对象：


Access to XMLHttpRequest at 'file:///tracker.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

message: undefined
name: "unknown"
status: 0

当我省略文件路径后面的“file:///”时，我得到以下信息：

yntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at index.js:16
    at Array.forEach (<anonymous>)
    at parseDump (index.js:12)
    at loadString (index.js:32)
    at index.js:87
    at onSuccess (index-browser.js:288)
    at index-browser.js:330
    at XMLHttpRequest.xhr.onreadystatechange (index-browser.js:198)

项目需要构建为本地 .html 文件，因为我们需要能够打开文件的链接。我该怎么做才能使 pouchdb-load 在这样的配置中工作？我现在很迷茫，所以任何帮助表示赞赏！我究竟做错了什么？是否有任何简单的技巧可以在用户不采取任何操作的情况下从文件系统打开文件？有没有其他方法可以将我的 pouchdb 数据库副本存储在文件系统上？如果是这样，我怎样才能找回它？

【问题讨论】：

标签： javascript json reactjs pouchdb

【解决方案1】：

确实是可怕的 CORS 错误，多么痛苦！当然，CORS 是最必要的，没有它，本地文件利用会很普遍。

显而易见的解决方案是通过 HTTP 在本地提供文件 - 想到 nodejs - 或从远程服务器提供服务。在这里，我提供了一个适合此用例的解决方法，可能不适用于其他用例。

这个解决方案取决于两个事实：浏览器允许加载相对于本地文档的本地脚本文件，并且pouchdb-load 支持从字符串加载数据库。

为了让那些从零开始的人受益，让我们从创建 CouchDB 数据库的转储开始。我使用 curl 和 jq^1,2 制作适合导入的转储

curl -X GET "http://localhost:5984/sratch/_all_docs?include_docs=true" 
| jq-win64 "{"""docs""": [.rows[].doc]}" > db.js

（以上来自 Windows 上的 VSCode 终端 - 因此使用三引号?）

好的，现在我们有一个 .js 文件，对我来说看起来像这样

{
    docs: [
        {
            _id: "a369bc7329751c1642476e752b000f8d",
            _rev: "1-6a0a8c1a35c6bb106fc3c53cdc99c034",
            id: "4567",
            user: "test2",
            address: {
                city: "New York",
            },
        },
        {
            _id: "a369bc7329751c1642476e752b00290e",
            _rev: "1-29508c896c6c773775c2c46f67714aad",
            id: "4568",
            user: "test2",
            info: {
                city: "Atlanta",
            },
        },
// etc....

当然，这是一个带有 .js 扩展名的 JSON 文件。为什么？让我们通过快速编辑转储文件将原始 JSON 更改为变量：

let CANNED_LOCAL_DB = {
        docs: [
            {
                _id: "a369bc7329751c1642476e752b000f8d",
// etc....

太好了，数据库现在是一个 JavaScript 对象。让我们加载它。

简单的 HTML：

<html>    
<body>
  <script src="./db.js"></script>
  <script src="./scripts/pouchdb.js"></script>
  <script src="./scripts/pouchdb.memory.js"></script>
  <script src="./scripts/pouchdb.load.js"></script>
  <script src="./scripts/index.js"></script>
</body>    
</html>

这里是 index.js 代码，证明了这个概念。

// "local" db
const ldb = new PouchDB("ldb", { adapter: "memory" });
// load the database from the object, stringified 
    ldb.load(JSON.stringify(CANNED_LOCAL_DB))
        .then(() => {               
            CANNED_LOCAL_DB = undefined;
            return ldb.info();
        })
        .then((info) => {
            console.log(JSON.stringify(info, undefined, 3));
        })
        .catch((err) => {
            console.log(err.toString());
        });

加载后固定的 db 对象设置为未定义 - 没有理由让它在内存中逗留。

请理解 db.js 是同步加载的，这可能会对大量罐装 db 产生丑陋的影响。这可以解决，但超出了此答案的范围。

¹ CouchDB dump to file and load from file
² jq, a lightweight and flexible command-line JSON processor

【讨论】：