Breaking News: Grepper is joining You.com. Read the official announcement!

React localStorage

Add Answer

Scary Snake answered on February 21, 2020 Popularity 10/10 Helpfulness 4/10

answer React localStorage

related react localstorage

related local storage react

React localStorage

Comment

const useLocalStorage = (keyName, defaultValue) => {
  const [storedValue, setStoredValue] = React.useState(() => {
    try {
      const value = window.localStorage.getItem(keyName);

      if (value) {
        return JSON.parse(value);
      } else {
        window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
        return defaultValue;
      }
    } catch (err) {
      return defaultValue;
    }
  });

  const setValue = newValue => {
    try {
      window.localStorage.setItem(keyName, JSON.stringify(newValue));
    } catch (err) {}
    setStoredValue(newValue);
  };

  return [storedValue, setValue];
};

Example
const MyApp = () => {
  const [name, setName] = useLocalStorage('name', 'John');

  return <input value={name} onChange={e => setName(e.target.value)} />;
};

ReactDOM.render(<MyApp />, document.getElementById('root'));

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.30secondsofcode.org

Tags: javascript local-storage

Link to this answer
Share Copy Link

Contributed on Sep 14 2021

Scary Snake

0 Answers Avg Quality 2/10

Closely Related Answers

react localstorage

Comment

// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: www.robinwieruch.de

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 21 2020

Curious Chimpanzee

0 Answers Avg Quality 2/10

local storage react

Comment

import { useState, useEffect } from "react";

function getStorageValue(key, defaultValue) {
  // getting stored value
  const saved = localStorage.getItem(key);
  const initial = JSON.parse(saved);
  return initial || defaultValue;
}

export const useLocalStorage = (key, defaultValue) => {
  const [value, setValue] = useState(() => {
    return getStorageValue(key, defaultValue);
  });

  useEffect(() => {
    // storing input name
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: blog.logrocket.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 05 2022

The Sheep

0 Answers Avg Quality 2/10

React localStorage

Contents

More Related Answers

React localStorage

Closely Related Answers

react localstorage

local storage react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.