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

local storage react

Add Answer

The Sheep answered on February 21, 2020 Popularity 10/10 Helpfulness 4/10

answer local storage react

related react localstorage

related React localStorage

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 local-storage

Link to this answer
Share Copy Link

Contributed on Jul 05 2022

The Sheep

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

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 j

Link to this answer
Share Copy Link

Contributed on Sep 14 2021

Scary Snake

0 Answers Avg Quality 2/10

local storage react

Contents

More Related Answers

local storage react

Closely Related Answers

react localstorage

React localStorage

Grepper

Documentation

Social

Legal

Contact

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