为什么本地存储不工作实时反应js？

Question

我从一个博客示例中使用react作为本地存储来编写这段代码，但刷新后它无法实时工作。我怎么能实时做呢？我认为它可以使用以前解决的效果挂钩，但我无法实现，有人帮我解决这个问题吗

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;
    

这个代码没有问题，但我想与实时工作，当我点击完成它显示实时我该怎么做？

Answer 1

如果你想用钩子

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
  };
}

将挂钩导入App.js

import { useUserHook } from "./userHook";

在代码中添加一些更改

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;

我希望它能帮到你

Answer 2

您可以使用< code>useState实时处理本地存储。

请注意，下面的实现仅用于演示，您不应该将密码存储在本地存储中！

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;

如果您想了解为什么我们不应该在本地存储中存储密码，您可以查看这篇文章

将密码等敏感信息存储在本地存储文件中实际上简化了黑客的过程，因为他们不需要将cookie加载到自己的浏览器中。

Answer 3

• 不要在渲染中使用状态引用本地存储。
• 将状态初始化为本地存储值。
更新
• 时，更新状态和本地存储。