Javascript 通过URL保存和重新创建状态

想象一下以下场景：

用户进入

https://mywebsite.com

，搜索内容并点击

[提交]

。将显示结果，URL现在为

https://mywebsite.com/floobah?q=burp

。用户单击一个锚，该锚将页面向下滚动到一个div，并选择多种方式来可视化结果。URL现在是

https://mywebsite.com/floobah?q=burp#viz

。用户选择饼图小部件并显示饼图和相关数据。URL现在是

https://mywebsite.com/floobah?q=burp&chart=pie&sort=asc#viz

然后用户将URL发送给朋友。当其收件人打开该URL时，状态将完全恢复为发件人的状态。换句话说，解析URL并执行恢复状态的操作…执行查询，页面向下滚动到viz部分，饼图打开，相关数据按请求排序显示

我现在通过解析URL并重播所有步骤来完成这项工作。但肯定已经有图书馆来做这件事了，不是吗？总之，我想要URL中编码的页面的状态，该页面可以共享，然后由URL书签的接收者重新创建

更新1:如上所述，我的URL存在问题

https://mywebsite.com/floobah?q=burp&chart=pie&sort=asc#viz

是指无法区分真正的查询参数（如

q=burb

）和通过单击某个元素并将事件侦听器连接到let的结果，例如，

chart=pie&soft=asc

。我需要能够区分用于处理事件的命令以及查询字符串和散列（

#即

）

---

更新2:因此，我有三组参数：在服务器上处理的queryString，在客户端处理的事件，以及在浏览器滚动到的页面上指定锚的哈希片段。如果我用

标记事件会怎么样？想象一下
https://mywebsite.com/floobah?q=burp!制作图表！排序，即
。查询字符串
q=burp
由服务器处理并返回到客户端，客户端向下滚动到
#即
，并向
makePieChart
和
sortAscending
触发事件。想法？
在我看来，使用URL来传达这一点正是你应该做的。HTTP是无状态的，因此请遵循从用户请求的函数和路径/查询参数派生服务器响应和初始状态的约定。如果你使用纯HTML，这是现成的。我知道的所有服务器端框架都允许你轻松地解析URL的查询参数，并相应地决定内容。至于散列路由，这是普通HTML中发生的事情（但如果您愿意，可以使用javascript进行操作）。