Error encountered while trying to store a JSON object in local storage

Question

Error encountered while trying to store a JSON object in local storage

When attempting to insert a JSON in localStorage, I am encountering the error

Unexpected token ~ in JSON at position 3

during the parse process.

Here is how I am inserting the data into localStorage:

localStorage.setItem(
    "users",
    `"[\"~#iM\",[\"loading\",false,\"auth\"]]"`
);

However, in localStorage, the data appears as:

"["~#iM",["loading",false,"auth"]]"

Attempting to parse it using:

JSON.parse("["~#iM",["loading",false,"auth"]]")

results in an error, while using:

JSON.parse("[\"~#iM\",[\"loading\",false,\"auth\"]]")

works correctly. The presence of \ is crucial. How can I maintain them in localStorage?

javascript json

Answer 1

Answer №1

If my understanding is correct, you are interested in storing and retrieving objects from the localStorage. As you may already know, localStorage can only store strings.

The simplest way to accomplish this is to convert the object into a string using JSON.stringify:

const myKey = 'exampleKey';

function saveToLocalStorage(obj) {
localStorage.setItem(myKey, JSON.stringify(obj));
}

function retrieveFromLocalStorage() {
return JSON.parse(localStorage.getItem(myKey));
}


let sampleObjectToStore = [
  "~#iM",
  [
    "loading",
    false,
    "auth"
  ]
];

saveToLocalStorage(sampleObjectToStore);

let retrievedObject = retrieveFromLocalStorage();
console.log(retrievedObject)

PS: The revised example provided by you is not functioning properly due to double quoting. Simply remove the outer backticks to rectify the issue, like this:

  localStorage.setItem(
    "users",
    "[\"~#iM\",[\"loading\",false,\"auth\"]]"
  );

Answer 2

If my understanding is correct, you are interested in storing and retrieving objects from the localStorage. As you may already know, localStorage can only store strings.

The simplest way to accomplish this is to convert the object into a string using JSON.stringify:

const myKey = 'exampleKey';

function saveToLocalStorage(obj) {
localStorage.setItem(myKey, JSON.stringify(obj));
}

function retrieveFromLocalStorage() {
return JSON.parse(localStorage.getItem(myKey));
}


let sampleObjectToStore = [
  "~#iM",
  [
    "loading",
    false,
    "auth"
  ]
];

saveToLocalStorage(sampleObjectToStore);

let retrievedObject = retrieveFromLocalStorage();
console.log(retrievedObject)

PS: The revised example provided by you is not functioning properly due to double quoting. Simply remove the outer backticks to rectify the issue, like this:

  localStorage.setItem(
    "users",
    "[\"~#iM\",[\"loading\",false,\"auth\"]]"
  );

Answer 3

Answer №2

Remove any additional quotes or backticks around the outer []

  localStorage.setItem(
    "users",
    `[\"~#iM\",[\"loading\",false,\"auth\"]]`
  );

  console.log(JSON.parse(localStorage.getItem( "users")))

View the live demo here

Answer 4

Remove any additional quotes or backticks around the outer []

  localStorage.setItem(
    "users",
    `[\"~#iM\",[\"loading\",false,\"auth\"]]`
  );

  console.log(JSON.parse(localStorage.getItem( "users")))

View the live demo here

Answer 5

Answer №3

  localStorage.setItem(
    "data",
    `["~#iM",["loading",false,"auth"]]`
  );

  console.log(JSON.parse(localStorage.getItem("data")))

I found success using this method, no need for the backward slashes.

Answer 6

  localStorage.setItem(
    "data",
    `["~#iM",["loading",false,"auth"]]`
  );

  console.log(JSON.parse(localStorage.getItem("data")))

I found success using this method, no need for the backward slashes.

Error encountered while trying to store a JSON object in local storage

Answer №1

Answer №2

Answer №3

Similar questions

Failure to achieve success with jQuery Ajax

Utilizing Express.js for reverse proxying a variety of web applications and their associated assets

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

Kivy: Issue encountered on iOS while working with JSON file for High Score

Execute JavaScript function after completion of CSS animation using jQuery

Is there a way to display the product name in the input field when it is selected using the keyboard?

Unpacking a collection in Xamarin using SQLite

Display or Conceal Sub-Header according to Scrolling Position

Develop a dynamic daily messaging system

jQuery providing incorrect measurements for an element's height

Using Jquery to insert error messages that are returned by PHP using JSON

Return empty parameters for nested routes efficiently

Mapping JSON data to a HashMap

What is the most effective method for merging two arrays in JavaScript?

The Protractor actions().mouseMove function does not seem to function properly in Firefox and IE, although it works perfectly in Chrome

Utilizing NodeJS to Extract Data from MongoDB and Export to JSON File

What is the best way to conduct synchronous testing of animations in AngularJS version 1.3.15?

Using JQuery to search for and remove the id number that has been clicked from a specific value

Ways to update a component's state by clicking a button located on a different component

Implementing a JavaScript file and ensuring W3C compliance