0

I need to store an array in sessionStorage and found this answer helpful: Storing Objects in HTML5 localStorage

Storing the array with sessionStorage.setItem('flavors', JSON.stringify(flavors)) and retrieving the string with JSON.parse(sessionStorage.getItem('flavors')) works the first time. Then, testing this plain-JavaScript PWA with the back- and forward- buttons, I get an error:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Depending on the elements of the array, the column number can vary.

I can avoid the error by using:

  flavors = sessionStorage.getItem('flavors').split(",");

instead of JSON.parse(). Along with the error, I can console log the string which looks okay:

chocolate,vanilla,strawberry

What could be causing the error?

Ken
  • 212
  • 3
  • 13
  • 1
    That string is not valid JSON. A string array in JSON would look like `["chocolate","vanilla","strawberry"]` – phuzi May 26 '21 at 14:40
  • 1
    Is there any other code that uses `sessionStorage.setItem('flavors')`? – phuzi May 26 '21 at 14:49
  • Most likely there's another place in your code (that gets invoked when navigating forward and back) that says `sessionStorage.setItem('flavors', flavors)`. This will cause the array to get turned into a comma-separated string without getting serialized to JSON first, and replace the 'flavors' value with that string. – StriplingWarrior May 26 '21 at 15:07
  • Either that, or `flavors` itself is getting set to something that's not an array. Can you put a console.log(flavors) prior to the call to `setItem` and see what it outputs? – StriplingWarrior May 26 '21 at 15:11
  • It does really look like something of this nature is happening, but setItem is only called when clicking on 'add to favorites'. The variable 'flavors' is only set and used to add a new flavor to the previously set favorites. The problem is with the back button. – Ken May 26 '21 at 15:24
  • As I said elsewhere, setItem is only used on the stringified array. I have a workaround though and I'll eventually stumble on my error. I'll post here when I do! Thanks. – Ken May 26 '21 at 15:27

1 Answers1

0

In order to parse JSON, the string must represent a valid JSON, in you case this JSON.parse('["chocolate","vanilla","strawberry"]') will work

Nikita Mazur
  • 1,602
  • 1
  • 5
  • 14
  • My array looks like that ["chocolate","vanilla","strawberry"] before it is stringified. JSON.stringify() turns it into that comma-separated string. And it works the first time. – Ken May 26 '21 at 14:45
  • 1
    The output of `JSON.stringify(["chocolate","vanilla","strawberry"])` is `'["chocolate","vanilla","strawberry"]'` can you perhaps share the code? – Nikita Mazur May 26 '21 at 14:51
  • I take that back. In fact, the stringified array does look like an array, with square brackets and quotes. But when return to the page with the back button, flavors = JSON.parse(sessionStorage.getItem('flavors')); fails, and console.log(sessionStorage.getItem('flavors')); prints out chocolate,vanilla,strawberry – Ken May 26 '21 at 14:52
  • I would be better to see the code) but seems like you try to parse an array which comes from `flavors = sessionStorage.getItem('flavors').split(",");`, which is already an array and doesn't need to be parsed – Nikita Mazur May 26 '21 at 14:58
  • Something like that but not that exactly. Splitting on the comma was a fix I found later. I am always setting with JSON.stringify(array) and getting with JSON.parse(string) – Ken May 26 '21 at 15:00
  • It works the first time and now, if it fails, I split on the comma. But it would be nice to know where I am going wrong. – Ken May 26 '21 at 15:02
  • The only relevant code is JSON.parse(sessionStorage.getItem('flavors')). I am not setting the sessionStorage item in between back and forward buttons. I am not parsing 'flavors' - only ever sessionStorage.getItem('flavors') – Ken May 26 '21 at 15:07
  • `JSON.parse(sessionStorage.getItem('flavors'))` works pretty fine by me) so its not a cause of problem) – Nikita Mazur May 26 '21 at 15:09
  • I'll keep looking for the cause. It's something stupid, for sure. And I have a workaround.. thanks – Ken May 26 '21 at 15:10