Question

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

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

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

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

编辑2：，所以这是我现在正在使用的代码，结合了我的 marzelin 和 Alchemist Shahed 的答案有关我的数据库结构（Firebase how to find child knowing its id but not its parent's 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>，但是它什么也没做。

Answer 1

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

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

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

我也将数据库条目的半衰期设置为不超过30天，以免阻塞数据库。

Answer 2

让我们从第一个问题“ 如何创建包含列表ID的网址？”

开始。

问题是要回答这个问题，我们需要回答第二个问题，第一个女巫是 “ 如何重新读取网址？”

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

现在回到第一个问题，如果用户像在社交媒体（例如：facebook）中一样共享草稿，则没有问题，因为他将共享一个链接，并且所有关注者和其他任何用户都可以轻松访问它。但是，如果用户只是保存草稿，那么您将不得不像这样window.history.pushState(null, null, '/draft?listId=your_newly_created_id');动态地更改页面网址，因此用户将复制该网址并进行任何其想做的事情（在stackoverflow中共享该网址，也许是使用jsfiddle { {3}}（您可以使用“ 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();
  });
}

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

3 个答案: