如何创建包含动态 html (javascript) 的可共享 url

Question

为用户创建的某些文本列表创建独特的可共享 url 的最佳做法是什么？

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

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

编辑： 如下所示，我已经将列表保存在数据库 (firebase) 中，并且每个列表都有一个唯一的 ID，所以我需要了解我是如何可以创建带有列表 ID 的 url，以及如何读取 url 返回。

编辑 2: 所以这是我现在使用的代码，结合了 marzelin 和 Alchemist Shahed 关于我的数据库结构的其他问题 ():

//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;
        }
     });
    });
  }

我只是尝试在搜索栏中手动写入 url 作为第一步，如 https://example.com/?share=<random list id i copied from db>，但它什么也没做。

Answer 1

所以我的方法是让用户共享点击触发保存到数据库，将所有动态生成的内容保存到 table。

其中一个 table 值是随机生成的某种唯一标识符，我将在 url 中用作查询，例如 https://www.example.org/?share=skd822475

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

我还会将数据库条目的半衰期设置为不超过 30 天，这样它就不会阻塞数据库。

Answer 2

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

问题是要回答这个问题我们需要先回答第二个问题是 "如何读回 url？"

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

现在回到第一个问题，如果用户像在社交媒体（例如：facebook）中一样分享草稿，那么就没有问题，因为他会分享 link 和他的所有追随者以及任何其他人用户可以轻松访问它。但是，如果用户只是保存草稿，那么您将不得不像这样 window.history.pushState(null, null, '/draft?listId=your_newly_created_id'); 动态地更改页面 url，因此用户将复制 url 并用它做任何他想做的事情（共享它在 Whosebug 中可能是使用 jsfiddle http://jsfiddle.net/F2es9/ 的示例（您可以使用 'htaccess' 文件将 url 更改为看起来像这样））最后我想告诉你我们不 "create" urls.

编辑

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

Answer 3

保存数据并创建可共享的 link:

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) 的可共享 url

How to create a sharable url containing dynamic html (javascript)

javascript

html

url-routing

share