How do I save an array containing objects with purely JavaScript after page redirect?

Question

I did research creating a string out of the array and then sending it as a cookie, but this array is very complicated as it contains objects with there own properties.

Example of one of the objects in the array:

var other0 = {
  name: "Where the Seas Meet",
  preview: "Lorem ipsum dolor sit amet, consectetur adipiscing",
  url: "other/where-the-seas-meet.html",
  keywords: ["sea", "ocean", "temperature", "salinity", "density",
    "mediterranean", "atlantic", "water", "waves", "fresh", "salty", "barrier",
    "partition", "estuary", "division", "seperation"]
};

I'm redirecting my page, and then I would like to access the array and write it's objects properties to the html document, but I don't how to store the array with just JS?

You could also [stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [encode](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa) and then add it to the cookie, then just [decode](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob) and [parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) it afterwards — Pedro Estrada, Nov 19 '20 at 18:57

Cristian Davide Conte · Answer 1 · 2020-11-19T19:49:24.570

A very simple way you can achieve this is by using JSON.
Let say we have our array of objects objArr which contains 2 objects other0 and other1.
We can use JSON.stringify(objArr) so that out array is now converted into the JSON format.
Storing the result of the stringify into a variable (let's call it jsonArr) will allow us to use it later for retrieving our data.
When the redirection occurs instead of going directly to your page's url, we choose to go to yourPageURL?jsonArr where jsonArr is the result of the stringify and the ? is a marker that allows http to carry data from a page to another.
The only thing left is to retrieve the data and convert it back to an object array !
In your page's code (the one we got redirected to) you simply extract the jsonArr from the url by using document.URL.split('?')[1] and store the JSON data into a variable (let's call it jsonArr2).
In the end we use JSON.parse(jsonArr2) to retrive our original objects array.
This is the code in case you need it:

/*---------------ORIGINAL PAGE'S CODE-----------------*/
var other0 = {
  name: "Where the Seas Meet",
  preview: "Lorem ipsum dolor sit amet, consectetur adipiscing",
  url: "other/where-the-seas-meet.html",
  keywords: ["sea", "ocean", "temperature", "salinity", "density",
    "mediterranean", "atlantic", "water", "waves", "fresh", "salty", "barrier",
    "partition", "estuary", "division", "seperation"]
};

var other1 = {
  name: "Big Foot",
  preview: "Lorem ipsum dolor sit amet",
  url: "other/myUrl.html",
  keywords: ["snow", "big", "foot", "monster"]
};

var objArr = [other0, other1];
var jsonArr = JSON.stringify(objArr);
console.log("Here you can see the effect of the conversion:\nThis is the original Array:\n", objArr,"\nThis is the generated json string:\n" ,jsonArr);

//Here you do the redirection to youPageUrl?jsonArr 

/*---------------REDIRECTED PAGE'S CODE-----------------*/
var jsonArr2 = document.URL.split('?')[1]; //This is the jsonArr from the previous page
var objArr2 = JSON.parse(jsonArr2); //This is the objArr from the previous page

Note that the stringify/parse may alter the order of your objects' properties so if you try to compare the original objArr to the one obtained with the parsing using the === you may get false because the orders of the 2 objects' properties are different.

thanks, when I do this I get an error in the chrome debugger VM201:1 Uncaught SyntaxError: Unexpected token j in JSON at position 0 at JSON.parse () at displayResults (article-nav.js:142) at onload (search.html?jsonArr:13) displayResults @ article-nav.js:142 onload @ search.html?jsonArr:13 — Sumi, Nov 19 '20 at 22:55
hi, that's because in the redirection to your search.html page you used the name of the variable `jsonArr` instead of its value. `jsonArr` is a variable that contains a string (which is the json representation of your original objects array) and what i meant was that you redirect to search.html?whateverIsContainedIntojsonArr. The error just says that instead of finding the correct JSON starting character it found 'j' which is the first letter of jsonArr, so just put the string it contains instead of its name and you should be fine ! — Cristian Davide Conte, Nov 19 '20 at 23:35
thanks, but now its giving me this error: Uncaught SyntaxError: Unexpected token % in JSON at position 2 — Sumi, Nov 20 '20 at 01:42
The cause of the error may depend on different causes, the redirecting and the data retrieving? If your code is hosted somewhere just post the link and i'll give it a look — Cristian Davide Conte, Nov 20 '20 at 09:58
I'm glad you solved your problem, i'll leave the answer here so that if anyone in the future have a similar problem a possible solution will be already here — Cristian Davide Conte, Nov 23 '20 at 11:20

How do I save an array containing objects with purely JavaScript after page redirect?

1 Answers1