本地存储在反应应用程序中不持久

Question

我正在创建一个使用本地存储的 React 应用程序。我正在将对象数组保存到本地存储。

当我尝试保存到本地存储时，数据正在保存。然后当我刷新页面时，保存的数据变成了空对象，像这样 [].

如果有人知道为什么会这样，请帮助我

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

function App() {
const keyy ="contactlist"
  const [contacts, setcontacts] = useState([])
 const contactshandler = (contact)=> {
   console.log(contact)
   setcontacts([...contacts, contact])
 }


 useEffect(() => {
  const getdata = JSON.parse(localStorage.getItem(keyy))
  getdata && setcontacts(getdata)
  }, [])

  useEffect(() => {
    localStorage.setItem(keyy, JSON.stringify(contacts));
    }, [contacts])
   
  return (
    <div className="ui container">
      <Header />
      <Addcontact contacts={contacts} contactshandler={contactshandler} />
      <Contactlist contacts={contacts} />
    </div>
  );
}

应用组件

import React, { useState } from 'react'

function Addcontact({contacts, setcontacts, contactshandler}) {
    const [user, setuser] = useState({username:'', email:''})

 const addvalue = (e) => {
    e.preventDefault();
    console.log(user)
    contactshandler(user)
    setuser({username:'', email:''})

}
    return (
        <div>
            <div className='ui main'>
                <h2> Add Contact</h2>
                <form className='ui form' onSubmit={addvalue}>
                    <div className=''>
                        <label>name</label>
                        <input name="name" placeholder='name' value={user.username} onChange={(e) => setuser({...user, username : e.target.value })} />
                    </div>
                    <div className='feild'>
                        <label>email</label>
                        <input email='email' placeholder='email' value={user.email} onChange={(e) => setuser({...user, email: e.target.value})} />
                    </div>
                    <button>add</button>
                </form>
            </div>
        </div>
    )
}

export default Addcontact

导出默认应用；

添加组件

这是刷新后保存时显示的值此值变为空对象

enter image description here

控制台 enter image description here

Answer 1

您不需要 useEffect 来读取数据。您可以初步阅读。

const [contacts, setcontacts] = useState(JSON.parse(localStorage.getItem(keyy)) ?? [])

并移除

 useEffect(() => {
  const getdata = JSON.parse(localStorage.getItem(keyy))
  getdata && setcontacts(getdata)
  }, [])

本地存储在反应应用程序中不持久

local storage is not persistent in react app

javascript

frontend

ecmascript-6

reactjs