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))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.
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 it. 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]
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)