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

Question

What is the best practice to create unique shareable urls for some text lists users create?

It's a single page website with a content div where users create text lists. Once they click share, how can I store those values inside a shareable url so that another user going to that address loads the same list?

I'm using html, js, jquery, php.

EDIT: as suggested below i'm already saving the lists on a database (firebase), and each have an unique ID, so I'd need to understand how I can create urls with a list id in it, and how to read the url back.

EDIT 2: so this is the code i'm using right now, combining answers from marzelin and the Alchemist Shahed in my other question about my database structure ( 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;
        }
     });
    });
  }

and i'm simply trying to manually write the url in the searchbar as a first step, as https://example.com/?share=<random list id i copied from db> , but it does nothing.

Answer 1

So the way I would to this is I would have the users share click trigger a save to database saving all the dynamically generated content into a table.

One of the table values would be a randomly generated unique identifier of some sort that I would use as a query in the url like https://www.example.org/?share=skd822475

Then when a user visits the site and that query is in the url id use the unique identifier to look up the database and publish the dynamic content back on the page.

I would also put a half life on the database entry's of say no more than 30 days so that it doesn't clog up the db.

Answer 2

Let's start with the first question " How to create urls with a list id in it? "

The thing is that to answer this one we need to answer the second question first witch is " How to read the url back? "

Consider that you have a php page named "draft". when a user visit https://www.example.com/draft?listId=an_id you will get listId using php like so $_GET("listId") and use that value to retrieve the list data and display the page content.

Now coming back to the first question, if the user share the draft like in social media (ex: facebook) then there is no problem because he will share a link and all his followers and any other user can access it easily. but if the user just save the draft then you will have to change the page url dynamically like this window.history.pushState(null, null, '/draft?listId=your_newly_created_id'); and so the user will copy the url and do whatever he wnt with it (sharing it in stackoverflow maybe example using jsfiddle http://jsfiddle.net/F2es9/ (you can change the url to look like this using 'htaccess' file)) at the end I would like to tell you that we don't "create" urls.

Edit

without using php code (or any other server side code). the difference will be in retrieving the data. instead of using $_GET("listId") you will use new URL(window.location).searchParams.get("listId") to get the list id in javascript then using this value you can retrieve data from firebase and display your content

Answer 3

Saving data and creating shareable 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}`)
})

Showing the dynamic HTML based on query parameters:

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