如何保存第一个用户的选择，然后生成唯一的代码/链接，最后为后续用户显示第一个用户的选择？

Question

我想创建一个带有选择的网页，然后当用户输入他们的选择时，我想要一个可以复制粘贴到论坛、电子邮件等的代码（或者更好的是唯一的 url）的输出。 . 允许他们的朋友点击链接并检索与该链接相关的输入选择。

如果链接+复制/粘贴到文本框中的代码然后生成共享条目，则代码会很好。

例如，我有几个下拉框：

一个包含 50 个州的下拉列表，一个包含性别的下拉列表，一个包含 1-100 岁，随孩子数量下拉。

最终用户来并选择他们想要的任何选项和页面 生成链接或代码，允许未来的最终用户单击 链接（首选）或将代码粘贴到文本框中，然后 选择希望共享的所有相应选择。这 允许第二个用户准确查看第一个用户想要查看的内容 分享一个简单的短链接/代码。

我被困住了，我知道我不必为每种可能性创建一个独特的网页，但我不知道如何处理。

如何保存第一个用户的选择，然后生成唯一的代码/链接，最后为后续用户显示第一个用户的选择？

Answer 1

你可能想要的是 url 参数..

这是一个使用正则表达式从 url 中获取参数的函数

function gup( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
  var regexS = "[\\?&]"+name+"=([^&#]*)";  
  var regex = new RegExp( regexS );  
  var results = regex.exec( window.location.href ); 
   if( results == null )    return "";  
  else    return results[1];
}

我不会担心那里发生了什么.. 但是要使用它，如果他们带着参数 (mysite.com/coolPage?whosCool=ImCool) 去那里，你就会有一个 url (mysite.com/coolPage)

您可以在您的 javascript 调用 gup("whosCool") 中返回“ImCool”

---

在您的示例中，您将拥有 mySite.com?state=oklahoma&gender=male

在您的 javascript 中，您可以在加载时：

document.getElementById('state').value = gup('state');​​​​​​​​​​
document.getElementById('gender').value = gup('gender');​​​​​​​​​​

---

要构建 url，当他们做出所有选择时，您将使用参数构建 url。

var url = "mycoolSite.com/mypage?";
url += "state=" + document.getElementById('state').value;
url += "gender=" + document.getElementById('gender').value;

document.getElementById('outputURL').innerHTML = "<a href='"+url+"'>Your url</a>";

这就是碎片，不过你必须一起构建它

Answer 2

我可以想到两种方法来做到这一点：

1. 存储该用户的所有信息并在他们生成链接时生成的唯一数据库 ID。

2. 一个更长的 url，所有选项都存储为最后的参数。

数据库解决方案

当用户点击生成链接时，我会获取从页面收集的所有信息，并将其推送到表单中进行处理。然后，我将所有信息存储在具有唯一 ID 的数据库中，并将该 ID 传递回用户，将其作为参数存储在生成的链接中的 url 中。

当用户单击链接时，您可以在页面加载时做的第一件事是查询 id 参数并显示以前存储的所有数据库字段。

根据您是否有任何 PHP 知识，您可能会发现这些链接很有用：

https://gist.github.com/webaware/4048580

http://www.dynamicdrive.com/forums/showthread.php?45895-How-to-populate-php-html-form-with-MySQL-data

网址参数解决方案

我会再次收集页面中的所有信息，并在建立包含列出参数的链接之前将其推送到表单中。所以 www.tester.com?gender=female 等。

当用户单击链接时，您可以在页面加载时做的第一件事是从链接中提取参数并根据适当的输入显示它们。

这可能会让您了解使用 javascript 执行此操作的基础知识。

Pre-fill form field via URL in html

从表单中获取信息：How to save data from a form with HTML5 Local Storage?

这个对你特别有帮助：How can I pre-populate html form input fields from url parameters?

第二个选项肯定更混乱，我自己可能会选择第一个选项。

希望它们都有意义 - 任何问题都可以问！