How to save json in LocalStorage using Reactjs?

December 21, 2021

I have this line of code JSON.parse(localStorage.setItem("search",data)) when i tried to console the data it works fine, i just want to save the result to the localstorage as JSON, this is the current result.

and I have this error

 SyntaxError: Unexpected token u in JSON at position 0

result of console.log()

>Solution :

Your code is completely backwards.

You need to stringify the data to JSON not parse it from JSON and you need to do so on the value you pass to setItem not the value you get back from setItem (which is always undefined, hence the error).

localStorage.setItem("search",JSON.stringify(data))

That said, since you said you were using React, I would advise against manipulating localStorage directly. The useLocalStorage hook makes life much easier.

import { useState } from "react";

// Usage
function App() {
  // Similar to useState but first arg is key to the value in local storage.
  const [name, setName] = useLocalStorage("name", "Bob");

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

// Hook
function useLocalStorage(key, initialValue) {
  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Get from local storage by key
      const item = window.localStorage.getItem(key);
      // Parse stored json or if none return initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // If error also return initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that ...
  // ... persists the new value to localStorage.
  const setValue = (value) => {
    try {
      // Allow value to be a function so we have same API as useState
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      // Save state
      setStoredValue(valueToStore);
      // Save to local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      // A more advanced implementation would handle the error case
      console.log(error);
    }
  };

  return [storedValue, setValue];
}