I'm doing this code from a blog example as local storage with react .but it doesn't work in real-time after refreshing it. how can I do it in real-time? I think it can use the effect hook used to be solved but I cannot implement it, does anybody help me with this solution

import './App.css';
import React, { useState,useEffect } from 'react';

function App() {
  
  const [name, setName] = useState('');
  const [pwd, setPwd] = useState('');
  
 
  
  const handle = () => {
     localStorage.setItem('Name', name);
     localStorage.setItem('Password', pwd);
  };
  const remove = () => {
     localStorage.removeItem('Name');
     localStorage.removeItem('Password');
  };
  return (
    <div className="App">
         <h1>Name of the user:</h1>
         <input
            placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
         <h1>Password of the user:</h1>
         <input
            type="password"
            placeholder="Password"
            value={pwd}
            onChange={(e) => setPwd(e.target.value)}
         />
         <div>
            <button onClick={handle}>Done</button>
         </div>
         {localStorage.getItem('Name') && (
            <div>
               Name: <p>{localStorage.getItem('Name')}</p>
            </div>
         )}
         {localStorage.getItem('Password') && (
            <div>
               Password: <p>{localStorage.getItem('Password')}</p>
            </div>
         )}
         <div>
            <button onClick={remove}>Remove</button>
         </div>
      </div>
   ); 
}

export default App;
    

This code has no problem but I want to work with real-time when I click done it shows real-time how do I?

CodePudding user response：

You can use useState to handle local storage in real-time.

Side note that the below implementation is just for demonstration, you SHOULD NOT store passwords in local storage at ALL COST!

import './App.css';
import React, { useState,useEffect } from 'react';

function App() {
  
  const [name, setName] = useState('');
  const [pwd, setPwd] = useState('');
  const [storedName, setStoredName] = useState(localStorage.getItem('Name'));
  const [storedPassword, getStoredPassword] = useState(localStorage.getItem('Password'));
  
  const handle = () => {
     localStorage.setItem('Name', name);
     localStorage.setItem('Password', pwd);
     setStoredName(name);
     setStoredPassword(pwd);
  };
  const remove = () => {
     localStorage.removeItem('Name');
     localStorage.removeItem('Password');
     setStoredName('');
     setStoredPassword('');
  };
  return (
    <div className="App">
         <h1>Name of the user:</h1>
         <input
            placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
         <h1>Password of the user:</h1>
         <input
            type="password"
            placeholder="Password"
            value={pwd}
            onChange={(e) => setPwd(e.target.value)}
         />
         <div>
            <button onClick={handle}>Done</button>
         </div>
         {storedName && (
            <div>
               Name: <p>{localStorage.getItem('Name')}</p>
            </div>
         )}
         {storedPassword && (
            <div>
               Password: <p>{localStorage.getItem('Password')}</p>
            </div>
         )}
         <div>
            <button onClick={remove}>Remove</button>
         </div>
      </div>
   ); 
}

export default App;

If you want to understand why we should not store passwords in local storage, you can check this article

Storing something sensitive like a password in a local storage file actually simplifies the process for a hacker, because they won’t need to load the cookie into their own browser.

CodePudding user response：

if you want to use hook

import React, { useState, useEffect } from "react";

export function useUserHook() {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [change, setChange] = useState(false);

  React.useEffect(() => {
    const loadSaved = async () => {
      setName(localStorage.getItem("Name"));
      setPassword(localStorage.getItem("Password"));
    };
    loadSaved();
  }, [name, password, change]);

  const saveData = async (name, password) => {
    setChange(!change);
    await localStorage.setItem("Name", name);
    await localStorage.setItem("Password", password);
  };

  const removeData = async () => {
    setChange(!change);
    await localStorage.removeItem("Name");
    await localStorage.removeItem("Password");
  };

  return {
    name,
    password,
    saveData,
    removeData
  };
}

import hook to App.js

import { useUserHook } from "./userHook";

add some changes in the code

import React, { useState, useEffect } from "react";
import { useUserHook } from "./userHook";
import "./styles.css";

const App = () => {
  const { name, password, saveData, removeData } = useUserHook();
  const [nameState, setName] = useState("");
  const [pwdState, setPwd] = useState("");

  const handle = () => {
    console.log("do save");
    saveData(nameState, pwdState);
  };
  const remove = () => {
    console.log("do remove");
    removeData();
  };
  return (
    <div className="App">
      <h1>Name of the user:</h1>
      <input
        placeholder="Name"
        value={nameState}
        onChange={(e) => setName(e.target.value)}
      />
      <h1>Password of the user:</h1>
      <input
        type="password"
        placeholder="Password"
        value={pwdState}
        onChange={(e) => setPwd(e.target.value)}
      />
      <div>
        <button onClick={handle}>Done</button>
      </div>
      {name && (
        <div>
          Name: <p>{name}</p>
        </div>
      )}
      {password && (
        <div>
          Password: <p>{password}</p>
        </div>
      )}
      <div>
        <button onClick={remove}>Remove</button>
      </div>
    </div>
  );
};

export default App;

I hope it can help you

CodePudding user response：

• Don't reference local storage in your render, use state.
• Initialize state to local storage value.
• On update of a value, update both state and local storage.