How do I allow sharing in a way similar to how JSFiddle does?

Question

I'm working on a small application that I want to allow users to be able to share with others. The entirety of the application runs client-side, though, using AngularJS. There is no access to a server (that I have needed).

Specifically, there is one angular object that is integral to the sharing of the configuration. Is there a way that I can turn this object entirely into a string or something that will allow me to re-build the object from said string?

In other words, my (array) object looks something like below:

// 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"}
]

Can I take that entire array object and turn it into a string, something like jn2340932rnxmclxm3290rj23ionqopdfsd923h413 so that I can put that into the URL:

http://mysite.me/jn2340932rnxmclxm3290rj23ionqopdfsd923h413

and then re-build the same object in JavaScript? How would I rebuild it?

You can definitely encode the object as a string, but it's going to be a pretty long string and thus a pretty ridiculous URL, and it is definitely not what jsfiddle is doing. Is your example array of three items typical, or can the object be much bigger? — nnnnnn, Dec 10 '14 at 05:26
@nnnnnn: The object can be much bigger. I'm thinking about doing it using a UUID and a database as suggested in the accepted answer. Any input? — Meetarp, Dec 10 '14 at 05:31
you can use a service like bitly or tinyurl to turn a long url into a short url, without maintaining your own DB. many such providers offer an API. think of it as 8kb of free state storage... — dandavis, Dec 10 '14 at 05:55

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Based on the following SO answer: https://stackoverflow.com/a/3776796/648350 (it mentions the browser limitations of atob and btoa)

You could use base64 to encode and decode your json object once stringified.

You'd do something like:

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"}

It's worth mentioning that the base64 encoded string is almost always going to be much bigger than the JSON.stringify'd string length.

I would be inclined to think though that the way JSFiddle does their sharing is they generate a UUID (see this answer https://stackoverflow.com/a/105074/648350) and then store the data in a database. This UUID is probably just to stop scrapers from simply incrementing a number and hammering their system if they were to just use the database row id in the url string. But this wouldnt be a pure js solution if i offered that

edited May 23 '17 at 10:33

Community

1
1

answered Dec 10 '14 at 05:17

haxxxton

6,422
3
27
57

Say I'm willing to forego pure JS and consider the utilization of a database. Then I could store the base64 string in a database, associated with a UUID like above? What are the consequences of doing something like that? – Meetarp Dec 10 '14 at 05:33
Personally, i wouldnt bother base64 encoding your data if you are going to end up storing it in a database, you could just use `JSON.stringify` to turn the data into a storeable string. The UUID, from what i assume, is really just for the purposes of stopping bots hammering the pages by incrementing a number. You could just as easily use a 'name', 'slug', 'id' ('id' only assuming you're not having to worry about bots), as long as its unique, as the key in your database and use that in your url. (1/2) – haxxxton Dec 10 '14 at 05:39
..(cont 2/2) Using angular i would do an AJAX `POST` of the JSON string to whatever architecture your server is running on and have it create the UUID, store both, then return the the UUID. Your server would need to generate and confirm the uniqueness of that UUID before returning anything to the client. When a successful return is received by the client, i would redirect/update the url address to include the UUID in the structure you expect. Then display some success message to the user that things were successfully saved `:)` – haxxxton Dec 10 '14 at 05:41

score 1 · Answer 2 · answered Dec 10 '14 at 05:23

make it into string and encode it to base 64 string webtoolkit base 64 js

And then

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)

once send you could decode it back to using

Base64.decode(str);

How do I allow sharing in a way similar to how JSFiddle does?

2 Answers2