I'm working on a flowchart editor that runs in the browser, and I wanted a way for people to use it without having to sign in, or store any data on our server. I wanted to give them control over their data and to be able to store it locally to open and edit later. And also easily share it with other people. It's easy to do this by supporting file upload/download, but I wanted something simpler, like the ability to share by sending a url. I also didn't want to store anything on the backend (at least for the free tier).
我正在开发一个在浏览器中运行的流程图编辑器，我希望人们不用登录，不用在我们的服务器上存储任何数据就能使用它。
我想让用户控制自己的数据，并能够将其存储在本地，以便以后打开和编辑，而且也很容易与他人分享。
通过支持文件上传/下载很容易做到这一点，但我想要一些更简单的东西，比如通过发送 url 来共享。
我也不想在后端存储任何东西（至少对于免费服务部分）。
I decied to encode the entire application state as a Base64 encoded string in the hashmark of the url. For example, a url would look like (note its truncated since they are very long):
我决定将整个应用程序状态编码为 Base64 字符串，放在 url 井号部分，例如（截断之后）：
knotend.com/g/a#N4IgzgpgTglghgGxgLwnARgiAxA9lAWxAC5QA7X...
Everything after the /g/a# is a stringified version of a json object that contains all the information about the flowchart. It gets stringified, then compressed, then Base64 encoded. I update the url on every graph edit, so copying the graph state is as simple as copying the url in your browser bar.
流程图有关的所有信息存储在 JSON 对象中，被转换成字符串，压缩，Base64，最后放在 URL 中。
每次编辑图形的时候更新 URL，复制 URL 就可以复制图形状态。
Here's the pseudo code for creating the url, and then later reading it:
伪代码：
const stateString = JSON.stringify(appState); // appState is a json object
const compressed = compress(stateString);
const encoded = Base64.encode(compressed);
// Push that `encoded` string to the url
// ... Later, on page load or on undo/redo we read the url and
// do the following
const decoded = Base64.decode(encoded); // same encoded as above, but read from url
const uncompressed = uncompress(decoded);
const newState = JSON.parse(uncompressed);
// Now load your application with the newState
There are several options for implementing the compress/uncompress functions, such as lz-stirng or pako.
有一些库可以实现压缩解压缩，比如 lz-string，pako。
Since I update it on every graph edit, I get something major for free -- undo/redo. The browser's history stack becomes my undo/redo functionality. The user can hit the browser back/forward buttons, or Command-Z,Command-Shift-Z which I map to history pop and push. This is a major win for something which is a free product that I wanted to ship quickly.
因为每次编辑图形都会更新 URL，依赖浏览器的历史功能，通过前进、后退按钮，或者快捷键 Command-Z、Command-Shift-Z，还能实现撤销和重做。
Another great benefit is that these urls can be embedded. That means the user can put their graph on any web page that supports embedding. I see people typically do this with wikis like Notion, which means you can share with a team without anyone needing an account on my site.
另一个巨大的好处是这些 URL 可以被嵌入。这意味着用户可以将他们的图形放在任何支持嵌入的 Web 页面上。
我看到人们通常在 Notion 这样的笔记软件中使用，这意味着您可以与团队共享，而不需要任何人在我的网站上注册帐户。
You can see how it works by checking out knotend, the keyboard-centric flowchart editor that I'mw working on.
你可以在 knotend 中看到这个到底是怎么实现。knotend 是我正在开发的一个键盘为中心的流程图编辑器。
Prior work and thank yous.
之前的工作，谢谢。
I'm not the first one to take this approach. I've seen atleast mermaidjs do this before, and I'm sure there are others.
我不是第一个采用这种方法的人。我以前至少见过 mermaidjs 这样做，我相信还有其他人。
Thank you to this comment by redleader55 on hacker news for pointing out that using window.location.hashmark is better for storing longer urls since some browsers will truncate the url when sending it over http. But that this doesn't apply to the hashmark, which stays client side.
感谢 redleader55 在 hacker news 上的评论，你指出使用 window.location.hashmark 更适合存储较长的 url，因为一些浏览器在通过 http 发送 url 时会截断 url。但这并不适用于 hashmark，它停留在客户端。
See conversation on Hacker News https://news.ycombinator.com/item?id=34312546