保存公用共享的值状态(添加到URL)

Save Value State for Public Sharing (Add to URL)

本文关键字:添加 URL 状态 共享 保存      更新时间:2023-09-26

http://liveweave.com/xfOKga

我正试图找出如何保存类似Liveweave的代码。

基本上,无论你编码什么,你都可以点击保存按钮,它会在url之后生成一个哈希。当你转到这个网址时,你可以看到保存的代码。(我一直在努力学习这一点,但我一直很难找到正确的来源。例如,我的搜索结果中出现了与我想要的完全无关的参考文献(

在过去的两天里,我一直在研究这个问题,但我没有得到任何答案。

有人能帮我找到一篇教程或文章来彻底解释这种类型的保存事件吗?

要理解功能,最好尝试识别正在发生的一切。根据通常用于每个可区分组件的技术来剖析此功能。然后,这个经过剖析的概述将使我们更容易看到底层技术是如何协同工作的。我怀疑你可能缺乏经验或命名法,无法一目了然地了解像liveweave这样的网站是如何工作的,或者如何搜索单个作品,所以我会为你进行分解。这将取决于你研究我将命名的单个组件。知道了这一点,以下是你需要研究的关键:

请注意,如果不是liveweave的实际开发人员,了解所有后端技术是不可能的,但明智的猜测就足够了。做法都一样。这是一个粗略的分解

1(带有HTML、CSS和JavaScript的标记页面。这是应用程序中面向用户的部分,可以在其中键入内容,以及用户如何与应用程序交互。

2(JavaScript异步(AJAX(将页面的表单提交给后端进行处理。

3(用于处理传入表单的后端编程/脚本语言。在liveweave的情况下,表单将被张贴。它还使用PHP来处理表单

4(每种语言都有一列的数据库表(liveweave有HTML、CSS和JavaScript(。该数据库将插入表单中提交并由PHP处理的每个文本区域的当前数据作为新行。每一行都将生成一个新的散列,并将其与刚刚插入的数据一起存储。一个流行的数据库是MySQL。

5(数据库插入完成后,脚本语言将再次接管,并将其响应发送回标记页面(1(。该页面正在等待来自后端的响应。JavaScript处理响应。在liveweave的情况下,响应是要在URL中使用的最新散列。

6(URL的魔力发生在JavaScript中。您需要查找JavaScript最新的历史API,其中将使用pushState等方法更新浏览器中的URL,而无需实际刷新页面。

当导航到具有给定哈希的URL时,脚本语言会处理请求,获取哈希,在数据库表中搜索哈希,找到匹配的行,并用刚刚找到的数据填充页面的文本区域。

在所有这些过程中,应该进行检查,以避免重复和大量利用。这也取决于你的研究。


应该指出的是,目前对你的问题有两条意见。Darren的链接确实允许URL更改,但这是一个重定向,而不是你想要的。ksealey的回答没有错;这是一种方法,但它不是最健壮或可扩展的,也不是解决此问题的推荐方法。