IndexedDB:将 url 映射到接受的 markdown/HTML 文本格式标记的正确架构

IndexedDB: proper schema to map urls to accepted markdown/HTML text formatting tags

本文关键字：格式 文本 HTML markdown url 映射 IndexedDB      更新时间：2023-09-26

免责声明

我对面向对象数据库的概念很陌生，老实说我不熟悉 在关系数据库方面也有很多经验。

我

正在尝试使用indexedDB来存储一些数据客户端，但在我进入它之前。我需要决定一个正确的架构。

我需要满足以下用例：

  • 我将根据URL查询数据库，我需要取回网站在其文本区域中用于markdown/HTML文本格式的所有标签。（不过，每个命令只需要 1 组标签）

目前，我计划使数据库中的每个 url 都成为自己的字典键。

例如： 

[ youtube.com:{ {command:"bold",   open:"*", close:"*" },
                {command:"italic", open:"_", close:"_" },
                ...
              },
  StackOverflow.com: { {command:"strong", open:"<strong>", close:"</strong>" },
                        .....
                     },
  .......
  .......
]

任何人都可以指出这种方法的缺陷/提出替代方案并给出解释吗？

出于性能原因，我最终可能会将最内部的字典更改为数组，但我在这里寻找有关一般模式的建议，而不是关于那个小点的建议。虽然，这方面的建议当然也会不胜感激。

编辑

现在我对 keyGen 和索引有了更多的了解，我认为肯定有更好的方法来做到这一点。也许我可以将命令名称本身设为 keyPath，并让该键中的每个对象都由一组标签和使用该组的 url 数组组成。

奖金问题：如果有人碰巧知道一种方法可以动态（务实地）检测网站在访问网站时使用的降价标签（如果有的话），那么我将奖励您 9001 独角兽美元。

一个快速的猜测是单个对象存储，您可以在其中存储具有两个属性的对象：url 和标签。假设每个对象都由 URL 唯一标识，则 url 属性将是键路径。tags 属性将是字符串的可变长度数组。然后，您可以拥有其他属性，但这将是两个重要的属性。

然后，可以在 tags 属性上创建索引，并设置多条目标志，以启用按标记查询页面。

例如，在 onupgradeneed，使用：

function onUpgradeNeeded(event) {
  var db = event.target.result;
  var pageStore = db.createObjectStore('pages', {keyPath: 'url'});
  pageStore.createIndex('tagIndex', 'tags', {multiEntry: true});
}

例如，要将对象放入存储中：

function insertPage(db, page, callback) {
  var tx = db.transaction('pages','readwrite');
  tx.oncomplete = callback;
  var pageStore = tx.objectStore('pages');
  pageStore.put(page);
}
var openRequest = indexedDB.open(...);
openRequest.onupgradeneeded = onUpgradeNeeded;
openRequest.onsuccess = function(event) {
  var db = event.target.result;
  var mockPage = {
    url: 'http://www.stackoverflow.com',
    tags: ['bold','comment','italics'],
    foo: bar
  };
  putPage(db, mockPage, function(event) {
    console.log('Completed putting %o into pages object store', mockPage);
  });
}

要按网址查询：

function findPageByURLThenHandle(db, url, callback, fallback) {
  var tx = db.transaction('pages','readonly');
  var pageStore = tx.objectStore('pages');
  var request = pageStore.get(url);
  request.onsuccess = function(event) {
    var page = event.target.result;
    if(page) {
      callback(page);
    } else {
      fallback(url);
    }
  };
}
var openRequest = indexedDB.open(...);
openRequest.onsuccess = function(event) {
  var queryURL = 'http://www.stackoverflow.com';
  var db = event.target.result;
  findPageByURLThenHandle(db, queryURL, function(page) {
    console.log('Found %o for %s', page, queryURL);
  }, function(url) {
    console.log('Could not find page for url %s', url);
  });
};

要查找具有给定标记的所有网页，请执行以下操作：

function handlePagesForTag(db, tag, callback) {
  var tx = db.transaction('pages','readonly');
  var pageStore = tx.objectStore('pages');
  var tagIndex = pageStore.index('tagIndex');
  var request = tagIndex.openCursor(tag);
  request.onsuccess = function(event) {
    var cursor = event.target.result;
    if(!cursor) return;
    var page = cursor.value;
    callback(page);
    cursor.continue();
  };
}

希望对您入门有所帮助。

相关文章：