Passing JSON Through URL

Question

I have two html files, and the task for us is to pass data between the two. Then I came up with the idea of sending the data through the URL using the hash, and parsing this link something like JSON.parse(window.location.hash.slice(1)); and assigning it to a local variable. It seems to work for the couple try. But when I populated my JS files with codes error occurs. Can you tell what alternative can I do.? Here's the console errors. I'm using jquery by the way ..

The Console Error

Thank you!

The error looks like you're trying to use the JSON in a jQuery selector and it contains a lot of invalid characters which you'll need to escape. I'd strongly suggest that you don't send JSON through the URL. Either send a normal querystring, or put the JSON in to `localStorage` and access that on the pages that require the data — Rory McCrossan, Jan 02 '17 at 15:06
That's right. You could store the object itself directly in localStorage which will save you having to serialise/deserialise it — Rory McCrossan, Jan 02 '17 at 15:10
If you use localStorage consider using Argon to make storing and retrieving the data easier https://github.com/geuis/argon — Geuis, Jan 02 '17 at 15:17
@mer igos No everything is serialized to a string. One reason I wrote Argon was to avoid that problem — Geuis, Jan 02 '17 at 15:19

score 0 · Answer 1 · answered Jan 02 '17 at 15:08

0

JSON contains a number of characters that are not legal in urls.

A simple way around this could be to simply encode the JSON data using Base64.

answered Jan 02 '17 at 15:08

Is that compatible to all browser.? – Mer Igos Jan 02 '17 at 15:11

score 0 · Answer 2 · answered Jan 02 '17 at 15:12

0

You can use the latest way of accessing the data from one page to another:

//1st page

storage["key"]=data;

//2nd page

var value= storage["key"];

answered Jan 02 '17 at 15:12

Codesingh

3,316
1
11
18

I'm not familiar with the `storage["key"]=data;` is that built in in JS.? Sorry for being so new .. – Mer Igos Jan 02 '17 at 15:18
yes, data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends. – Codesingh Jan 02 '17 at 15:21
i would prefer you to use this and it supports all browsers. – Codesingh Jan 02 '17 at 15:22
So storage means localStorage? – Mer Igos Jan 02 '17 at 15:23

score 0 · Answer 3 · answered Jan 02 '17 at 15:13

0

I think jQuery.param is what you need it converts a Json into a URL String

http://www.sourcecodemart.com/convert-json-object-to-url-query-string/

answered Jan 02 '17 at 15:13

Berti92

441
1
6
12

score 0 · Answer 4 · edited May 23 '17 at 12:08

This won't work in the long run. urls are limited to about 2000 characters. What is the maximum length of a URL in different browsers?

You have to base64 encode the json to have it live in the URL. This eats up a lot of the available characters.

You don't get the same limitations when doing POST requests but a HTML page can't access post requests.

You might want to look at postMessage and embedding one page in the other in an iframe to do cross communication.

Also if the urls are on the same domain, just use local or session storage.

Passing JSON Through URL

4 Answers4