CODEWITHSUNDEEP
javascript
Richardson
Richardson

Reputation: 2285

JSON.stringify is distorting code adding \ inside strings?

I am trying to save local storage info but what happens is I am getting \ added to all the items that are strings I mean as some answers stated it is caused by double stringfy ? issue is my blob action that saves the local storage refuse to handle the it unless is it is stringifed, long story short could this double stringfy needed for the function cause issues later, I have no problem when parsing back but the look of the saved elements looks really weird ?

//const ls = JSON.stringify(localStorage);
// "id":"\"159e17e9-19b7-453d-8e10-a411c7424586\"
// "groups":"{\"bee7bdc4-d888-46e6-93d7-ed0c\" : :[{\"id\":\"0e6e6426-4d79-4eea-9180-06111dd2a0e3\"}]
  
  
  
const config = {a: 'fdfgdg', b: 2}
console.log(JSON.stringify(config))

Upvotes: 0

Views: 1149

Answers (4)

Mac
Mac

Reputation: 1566

As others have pointed out, things aren't going as planned because you are stringifying localStorage itself, as well as improperly stringifying and parsing your data.

It would be much easier just to save the object directly to localStorage and then retrieve it as needed, without having to fool around with stringifying and parsing. While these methods are necessary, all they accomplish is to convert your data into the format useable by localStorage anyway, but the data itself stays converted, that is, a float 122.55 is converted into a string "122.55" and it stays that way.

Wouldn't it be so much easier if you could directly store the number 122.55 and retrieve it that way also?

Have a look at localDataStorage, where you can transparently set/get any of the following "types": Array, Boolean, Date, Float, Integer, Null, Object or String. It seamlessly converts your data, stores it, and allows you to retrieve it just the way it went in. Store an object and get it back. Store a date and get it back. Store a number or a boolean and get those back.

Examples:

localDataStorage.set( 'key1', false );
localDataStorage.get( 'key1' );   -->   false (boolean)

localDataStorage.set( 'key2', 122.55 );
localDataStorage.get( 'key2' );   -->   122.55 (float)

var obj = {
    id: '159e17e9-19b7-453d-8e10-a411c7424586',
    groups: '000e17e9-19b7-453d-8e10-a411c7424500'
}
localDataStorage.set( 'key3', obj );
localDataStorage.get( 'key3' );   -->   {id: '159e17e9-19b7-453d-8e10-a411c7424586', groups: '000e17e9-19b7-453d-8e10-a411c7424500'} (object)

localDataStorage.set( 'key4', "this is \"something\"" );
localDataStorage.get( 'key4' );   -->   'this is "something"' (string)

All of the conversion work is done in the background for you: just set/get and go.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

When saving to localStorage use JSON.stringify (since Storage accepts only String values):

const myData = {some: "data", other: "stuff"};
localStorage.appData = JSON.stringify(myData);

When reading from localStorage, use JSON.parse:

const myData = JSON.parse(localStorage.appData || "{}");
console.log(myData);  // {some: "data", other: "stuff"}

Don't be afraid of escaped double-quotes with backslash! Otherwise it would end up in an invalid String format

const test = "this is \"something\""; // properly escaped quotes

Get used to see in console (on in LocalStorage) the escaped strings used for Keys os String properties of a JSON stringified Object literal:

"{\"prop\": \"some value\"}"   // Valid stringified JSON

perfectly fine.

Learn more about the JSON format.
JSON, in order to be valid, its keys need to be enclosed in double quotes. JSON.stringify will take care of adding quotes to a JS Object Literal keys for you.

Upvotes: 1

Kostiantyn Ko
Kostiantyn Ko

Reputation: 2736

There's no "extra backslash", it's just your means of output show that extra backslash, because it is the way it renders string values (you probably use browser console for that, didn't you?).

Be sure, the actual stringified value does not contain any characters that are not supposed to be there.

Upvotes: 0

FelipeHSouza
FelipeHSouza

Reputation: 375

When you are getting a stringfied object and you want him to become an object again, there is another command to do so

JSON.parse(obj)


var obj = {
    id: '159e17e9-19b7-453d-8e10-a411c7424586',
    groups: '000e17e9-19b7-453d-8e10-a411c7424500'
}

var stringfiedObject = JSON.stringify(obj)
console.log(stringfiedObject)

var objectFromStringfiedObject = JSON.parse(stringfiedObject)
console.log(objectFromStringfiedObject)

Upvotes: 0

Related Questions