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

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

这是一个单页网站，有一个内容分区，用户可以在其中创建文本列表。一旦他们单击共享，我如何将这些值存储在一个可共享的url中，以便前往该地址的其他用户加载相同的列表

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

编辑：如下所示，我已经将列表保存在数据库（firebase）中，每个列表都有一个唯一的ID，因此我需要了解如何创建包含列表ID的url，以及如何读回url

编辑2:这是我现在使用的代码，结合了marzelin和炼金术士Shahed在我关于数据库结构的另一个问题（）中的答案：

---

我只是尝试在搜索栏中手动编写url作为第一步，如

https://example.com/?share=

，但它什么也不做。

因此，我的方法是让用户共享单击触发保存到数据库将所有动态生成的内容保存到一个表中

其中一个表值是随机生成的某种唯一标识符，我将在url中用作查询，如

https://www.example.org/?share=skd822475

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

---

我还要对数据库条目设置半衰期，比如不超过30天，这样就不会阻塞数据库。

让我们从第一个问题开始“如何创建包含列表id的URL？”

问题是要回答这个问题，我们需要回答第二个问题，第一个问题是女巫 “如何读回url？”

假设您有一个名为“draft”的php页面。当用户访问

https://www.example.com/draft?listId=an_id

您将像so

$\u get（“listId”）

一样使用php获取

listId

，并使用该值检索列表数据和显示页面内容

现在回到第一个问题，如果用户像在社交媒体（例如：facebook）中一样共享草稿，那么就没有问题了，因为他将共享一个链接，他的所有追随者和任何其他用户都可以轻松访问它。但是如果用户只是保存草稿，那么您必须像下面这样动态更改页面url

window.history.pushState（null，null，/draft？listId=your_new_created_id'）

因此用户将复制url并使用它执行任何操作（例如使用JSFIDLE在stackoverflow中共享它（您可以使用“htaccess”文件将url更改为这样）），最后我想告诉您，我们不会“创建”url

编辑

不使用php代码（或任何其他服务器端代码）。不同之处在于检索数据。

---

您将使用

新URL（window.location）.searchParams.GET（“listId”）

来获取javascript中的列表id，而不是使用

$\u GET（“listId”）

，然后使用此值可以从firebase检索数据并显示您的内容

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

document.querySelector（“.share”）.addEventListener（“单击”=>{
var dynamicHtmlListRef=firebase.database（）.ref（'dynamic_html'）；
var dynamicHtmlItemRef=dynamicHtmlListRef.push（）；
dynamicHtmlItemRef.set（userCreatedDynamicHtml）；
var keyOfDynamicHtmlItem=dynamicHtmliterRef.key；
var linkToDynamicHtmlItem=`${window.location}？share=${keyofDynamicHtmlItem}`；
警报（`link:${linkToDynamicHtmlItem}`）
})

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

const-keyOfDynamicHtmlItemRef=新URL（window.location）.searchParams.get（“共享”）
if（keyOfDynamicHtmlItemRef）{
var dynamicHtmlListRef=firebase.database（）.ref（'dynamic_html'）；
var dynamicHtmlItemRef=dynamicHtmlListRef.child（keyOfDynamicHtmlItemRef）；
KeyOfDynamicHtmlLiteMref.once（“值”）。然后（dynamicHtmlSnap=>{
document.querySelector（“.dynamic html mountpoint”）.innerHTML=dynamicHtmlSnap.val（）；
});
}

事实上，我已经在firebase上保存了所有列表，因此只有在用户先保存列表的情况下，才能让他们共享这些列表，这与您提到的想法非常吻合！我完全不知道如何创建这些URL并将其读回？thanksok所以你想做的是：在firebase中，当你发布保存时，你会得到一个内容的uniqe id，所以这就是你想要的id。然后，您需要获取该唯一id，并将其插入到要交付的url中。这可能也会有帮助，因为没有JavaScript的文档。谢谢你的回答，我开始把这些拼图拼凑起来。幸运的是，没有草稿，用户共享的内容将保留在url中。问题是firebase不允许用户从另一个用户那里读取数据（id的内容），据我所知，它需要某种管理查询服务器端。关于草稿的中间部分我仍然不清楚，如果我像这样使用js创建url并将列表id放在“？listId=”中，怎么可能那么php会自动知道该id中的内容吗？我还不能创建一个自定义的example.com/#，然后用javascript说if url.indexOf（）然后从firebase加载东西吗？不一样吗？我想涉及的后端知识太多了（我根本不是后端开发人员），所以除非有一个能简化一些事情的库，否则我最好放弃this@notsure当然，您必须使用服务器端代码。当您在php中获得$_get（“listId”）时，在所有php都是服务器端之后，您必须使用此管理查询检索数据language@notsure您说您不明白php是如何自动知道id中的内容的。php不会自动知道该值，它等于$_GET（“listId”），因此您将使用$

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