javascript - 为公共(public)共享保存值状态(添加到 URL)

Question

http://liveweave.com/xfOKga

我正在尝试弄清楚如何保存类似于 Liveweave 的代码。

基本上，无论您编写什么代码，您都可以单击保存按钮，它会在 url 后生成一个散列。当您转到此网址时，您可以看到保存的代码。 (我一直在努力学习这一点，我一直无法找到正确的资源。我的搜索结果最终包含与我正在寻找的内容完全无关的引用，example)

过去两天我一直在研究这个问题，但一无所获。

任何人都可以帮我找到一个教程或文章来彻底解释这种类型的保存事件吗？

Answer 1

要了解功能，最好尝试识别正在发生的一切。根据通常用于每个可区分组件的技术来剖析此功能。这种经过剖析的概述将使人们更容易了解底层技术如何协同工作。我怀疑您可能缺乏经验或术语，无法一眼看出像 liveweave 这样的网站是如何工作的，或者如何搜索各个部分，所以我会为您分解一下。由您来研究我将命名的各个组件。知道了这一点，以下是您需要研究的关键:

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

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

2) JavaScript 以异步方式 (AJAX) 将页面的表单提交到后端进行处理。

3) 用于处理传入表单的后端编程/脚本语言。在 liveweave 的情况下，表单是 POSTed。它还使用 PHP 来处理表单。

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

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

6) URL 魔术发生在 JavaScript 中。您想要查找 JavaScript 的最新 History API，其中 pushState 等方法将用于更新浏览器中的 URL 而无需实际刷新页面。

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

在所有这些过程中，应该进行检查以避免重复和大量利用。这也看你去研究了。

---

请注意，目前您的问题有两条评论。 Darren 的链接确实允许更改 URL，但它是重定向，而不是您想要的。 ksealey的回答没有错；这是一种实现方法，但它不是最健壮或可扩展的，也不是解决此问题的推荐方法。