我如何允许以类似于 JSFiddle 的方式进行共享？

Posted 2023-02-23

【中文标题】我如何允许以类似于 JSFiddle 的方式进行共享？

【英文标题】：How do I allow sharing in a way similar to how JSFiddle does?

【发布时间】：2014-12-10 05:08:14

【问题描述】：

我正在开发一个小型应用程序，希望用户能够与其他人共享该应用程序。不过，整个应用程序使用 AngularJS 在客户端运行。无法访问服务器（我需要）。

具体来说，有一个角度对象是配置共享不可或缺的。有没有办法可以将这个对象完全变成一个字符串，或者可以让我从所述字符串重新构建对象？

换句话说，我的（数组）对象如下所示：

// Variable number of objects stored in the array. 3 shown here.
var arrayObj = [
  prop1: "something", prop2: "other", prop3: "other",
  prop1: "something", prop2: "other", prop3: "other",
  prop1: "something", prop2: "other", prop3: "other"
]

我可以把整个数组对象变成一个字符串，比如jn2340932rnxmclxm3290rj23ionqopdfsd923h413，这样我就可以把它放到 URL 中：

http://mysite.me/jn2340932rnxmclxm3290rj23ionqopdfsd923h413

然后在 javascript 中重新构建相同的对象？我将如何重建它？

【问题讨论】：

您绝对可以将对象编码为字符串，但它将是一个很长的字符串，因此是一个非常荒谬的 URL，而且这绝对不是 jsfiddle 正在做的事情。您的示例数组是典型的三个项目，还是对象可以更大？

@nnnnnn：对象可以更大。我正在考虑按照接受的答案中的建议使用 UUID 和数据库来执行此操作。有什么意见吗？

是的，我就是这么做的。

您可以使用 bitly 或 tinyurl 之类的服务将长 url 转换为短 url，而无需维护自己的数据库。许多这样的提供商都提供 API。将其视为 8kb 的空闲状态存储...

【参考方案1】：

基于以下 SO 答案： https://***.com/a/3776796/648350（提到了atob和btoa的浏览器限制）

一旦字符串化，您就可以使用 base64 对您的 json 对象进行编码和解码。

你会做这样的事情：

extractObject = function(str)
    return JSON.parse(atob(str));


makeShareableString = function(obj)
    return btoa(JSON.stringify(obj));




var test = "this":"that","foo":"bar";

makeShareableString(test);
// returns "eyJ0aGlzIjoidGhhdCIsImZvbyI6ImJhciJ9"

extractObject("eyJ0aGlzIjoidGhhdCIsImZvbyI6ImJhciJ9");
// returns "this":"that","foo":"bar"

值得一提的是，base64 编码的字符串几乎总是比 JSON.stringify 的字符串长度大很多。

---

我倾向于认为 JSFiddle 进行共享的方式是生成 UUID（请参阅此答案 https://***.com/a/105074/648350），然后将数据存储在数据库中。这个 UUID 可能只是为了阻止爬虫在 url 字符串中使用数据库行 id 时简单地增加一个数字并锤击他们的系统。但如果我提供的话，这将不是一个 纯 js 解决方案

【讨论】：

说我愿意放弃纯 JS 并考虑使用数据库。然后我可以将base64字符串存储在数据库中，与上面的UUID相关联？这样做会有什么后果？

就个人而言，如果您最终要将数据存储在数据库中，我不会打扰对您的数据进行 base64 编码，您可以使用JSON.stringify 将数据转换为可存储的字符串。从我的假设来看，UUID 实际上只是为了阻止机器人通过增加一个数字来敲击页面。您可以轻松地使用“名称”、“slug”、“id”（“id”仅假设您不必担心机器人），只要它是唯一的，作为数据库中的键并使用它在您的网址中。 (1/2)

..(cont 2/2) 使用 Angular 我会对 JSON 字符串执行 AJAX POST 到您的服务器运行的任何架构，并让它创建 UUID，存储两者，然后返回UUID。在将任何内容返回给客户端之前，您的服务器需要生成并确认该 UUID 的唯一性。当客户端收到成功返回时，我将重定向/更新 url 地址以将 UUID 包含在您期望的结构中。然后向用户显示一些成功消息，表明事情已成功保存:)

【参考方案2】：

将其转换为字符串并将其编码为 base 64 字符串 webtoolkit base 64 js

然后

var arrayObj = [
prop1: "something", prop2: "other", prop3: "other",
prop1: "something", prop2: "other", prop3: "other",
prop1: "something", prop2: "other", prop3: "other"
]
var str = JSON.stringify(arrayObj);
var encodeString = Base64.encode(str)

发送后，您可以将其解码回使用

Base64.decode(str);