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()
CodePudding user response:
Quentin's answer is right, but you can also create a utility to manage data in local storage.
export const saveToLocal = (key, data) => {
localStorage.setItem(key, JSON.stringify(data));
};
export const getFromLocal = (key) => {
const data = localStorage.getItem(key);
return JSON.parse(data);
};
export const removeFromLocal = (key) => {
localStorage.removeItem(key);
};
CodePudding user response:
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]; }