为用户创建的某些文本列表创建唯一可共享urls的最佳实践是什么?
这是一个带有内容div的单页网站,用户可以在其中创建文本列表。单击共享后,我如何将这些值存储在可共享的url中,以便其他用户访问该地址时加载相同的列表?
我使用html,js,jquery,php。
编辑:如下所示我已经将列表保存在一个数据库(firebase)上,并且每个列表都有一个唯一的ID,所以我需要了解如何在其中创建带有列表id的url,以及如何读回url。
EDIT 2:这是我现在使用的代码,结合了marzelin和炼金术师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;
}
});
});
}
作为第一步,我只是尝试在搜索栏中手动编写url,作为https://example.com/?share=<random list id i copied from db>
,但它什么也做不到。
发布于 2018-10-15 06:12:43
保存数据并创建可共享链接:
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();
});
}
发布于 2018-10-12 10:01:49
因此,我的方法是让用户共享,单击,触发保存到数据库,将所有动态生成的内容保存到一个表中。
其中一个表值是随机生成的某种类型的唯一标识符,我将使用它作为url中的查询,如https://www.example.org/?share=skd822475
然后,当用户访问站点并且该查询在url中时,使用唯一标识符来查找数据库并将动态内容发布回页面。
我还会在数据库条目上设置半寿命,比如不超过30天,这样它就不会阻塞数据库。
发布于 2018-10-15 05:56:15
让我们从第一个问题"How to create urls with a list id in it?“开始
问题是,为了回答这个问题,我们首先需要回答第二个问题,即"How to read The url back?“
假设你有一个名为"draft“的php页面。当用户访问https://www.example.com/draft?listId=an_id
时,您将使用php获取listId
,例如$_GET("listId")
,并使用该值来检索列表数据并显示页面内容。
现在回到第一个问题,如果用户像在社交媒体(例如: facebook)中一样分享草稿,那么就没有问题,因为他会分享一个链接,他的所有追随者和任何其他用户都可以很容易地访问它。但是如果用户只是保存草稿,那么你将不得不像这个window.history.pushState(null, null, '/draft?listId=your_newly_created_id');
一样动态地改变页面url,这样用户就会复制url并用它做任何他想做的事情(例如使用jsfiddle http://jsfiddle.net/F2es9/在stackoverflow中共享它(你可以使用'htaccess‘文件将url改变成这样))最后我想告诉你,我们不会“创建”url。
编辑
而不使用php代码(或任何其他服务器端代码)。不同之处在于检索数据。您将使用new URL(window.location).searchParams.get("listId")
在javascript中获取列表id,而不是使用$_GET("listId")
,然后使用此值可以从firebase检索数据并显示您的内容
https://stackoverflow.com/questions/52771076
复制相似问题