如何创建包含动态html的可共享网址（javascript）

Question

为用户创建的某些文本列表创建唯一的可共享URL的最佳实践是什么？

这是一个具有内容div的单页网站，用户可以在其中创建文本列表。 当他们单击共享时，如何将这些值存储在可共享的url中，以便另一个访问该地址的用户加载相同的列表？

我正在使用html，js，jquery，php。

编辑：如下所示，我已经将列表保存在数据库（firebase）上，并且每个列表都有唯一的ID，因此我需要了解如何创建带有列表ID的网址，以及如何读取网址返回。

编辑2：这是我现在正在使用的代码，结合了marzelin和炼金术师Shahed在我有关数据库结构的其他问题中的答案（ Firebase如何找到知道其ID但不知道其父母ID（js）的孩子 ）：

//js inside window load function:
  const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
  if (keyOfDynamicHtmlItemRef) {
    var dynamicHtmlListRef = firebase.database().ref('users');
    // var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
    // console.log(keyOfDynamicHtmlItemRef);
    // dynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
    //   texta.innerHTML = dynamicHtmlSnap.val();
    // });
    dynamicHtmlListRef.once('value').then((snapshot)=>{
     snapshot.forEach(function(data) {
        if (data.key == keyOfDynamicHtmlItemRef) {
          myVar = data.c;
          myContentDiv.innerHTML = myVar;
        }
     });
    });
  }

并且我只是尝试第一步，将网址手动写在搜索https://example.com/?share=<random list id i copied from db> ，如https://example.com/?share=<random list id i copied from db> ，但它什么也没做。

Answer 1

因此，我要这样做的方式是让用户共享点击触发存储到数据库的保存，将所有动态生成的内容保存到表中。

表值之一是随机生成的某种唯一标识符，我可以将其用作网址中的查询，例如https://www.example.org/?share=skd822475

然后，当用户访问该站点并且该查询位于url id中时，使用唯一标识符来查找数据库并将动态内容发布回页面上。

我还将在数据库条目上设置半衰期，例如不超过30天，以免阻塞数据库。

Answer 2

让我们从第一个问题开始：“ 如何创建带有列表ID的URL？ ”

问题是要回答这个问题，我们首先要回答第二个问题：“ 如何读回URL？ ”

考虑您有一个名为“草稿”的php页面。 当用户访问https://www.example.com/draft?listId=an_id您将像$_GET("listId")这样使用php获取listId并使用该值检索列表数据并显示页面内容。

现在回到第一个问题，如果用户像在社交媒体（例如：facebook）中一样共享草稿，则没有问题，因为他将共享一个链接，并且所有关注者和任何其他用户都可以轻松访问它。 但是，如果用户只是保存草稿，则必须像此window.history.pushState(null, null, '/draft?listId=your_newly_created_id');一样动态地更改页面网址window.history.pushState(null, null, '/draft?listId=your_newly_created_id'); 因此用户将复制该网址并进行任何操作（在stackoverflow中共享该网址，例如，使用jsfiddle http://jsfiddle.net/F2es9/的示例（您可以使用“ htaccess”文件将其更改为如下所示的网址） ）最后，我想告诉您，我们不会“创建”网址。

编辑

而不使用php代码（或任何其他服务器端代码）。 区别在于检索数据。 而不是使用$_GET("listId")您将使用new URL(window.location).searchParams.get("listId")在javascript中获取列表ID，然后使用此值可以从firebase检索数据并显示内容

Answer 3

保存数据并创建共享链接：

document.querySelector(".share").addEventListener("click" => {
  var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
  var dynamicHtmlItemRef = dynamicHtmlListRef.push();
  dynamicHtmlItemRef.set(userCreatedDynamicHtml);
  var keyOfDynamicHtmlItem = dynamicHtmlItemRef.key;
  var linkToDynamicHtmlItem = `${window.location}?share=${keyofDynamicHtmlItem}`;
  alert(`link: ${linkToDynamicHtmlItem}`)
})

显示基于查询参数的动态HTML：

const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
if (keyOfDynamicHtmlItemRef) {
  var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
  var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
  keyOfDynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
    document.querySelector(".dynamic-html-mountpoint").innerHTML = dynamicHtmlSnap.val();
  });
}