Блог

Главная - Вопросы по программированию - Как обновить Localstorage

Как обновить Localstorage

#reactjs #react-hooks

Вопрос:

У меня есть конечная точка API, которая возвращает аутентифицированные пользовательские данные со списком телефонных номеров, сохраненных в локальном хранилище, а также компонент, который извлекает телефонные номера из локального хранилища. Я хочу обновить локальное хранилище при выборе телефонного номера, изменив индекс выбранного телефонного номера на 0. Пожалуйста, как мне этого добиться?

Мой код ниже.

Данные пользователя в локальном хранилище

 useraccount {        
     accounts: [
          0: {phone: "010475758585"}
    
          1: {phone:"090839494404" }
        ]
    }

Компонент

      const{useraccount: {accounts}} = isAuthenticated()

     **// Endpoint below is dependent on the selected phone number**


    const getUserTransactions =() =>{
       axios.get(`http://example/transactions/${accounts[0]?.phone}`,{
        headers: {
          'Authorization': `Bearer ${token}`
        }
       }).then((res)=>{
         if(res.data){
           console.log(res.data);
           setFetchingTransactions(res.data)
         }else{
           console.log("failed")
         }
       })
    }

  useEffect(() => {
    
      getUserTransactions()
  }, []);

  
      
      return  (
            <>
               <h3>Select an phone</h3>   
                  <ul>
                      {accounts amp;amp; accounts.map((item, id) => (
                      <li key={id}>
                     <h3>{item.phone}</h3>
                 </li>         
               ))}
          </ul>
          <Button type="submit"  >
                  Select
            </Button>
    </>
    )

Комментарии:

1. «Я хочу обновить локальное хранилище при выборе номера телефона, изменив индекс выбранного номера телефона на 0» — Трудно понять, что вы имели в виду под этим. Пожалуйста, отредактируйте свой вопрос и сделайте его более понятным.

Ответ №1:

В useHooks есть очень полезный крючок для этого под названием useLocalStorage . Видишь https://usehooks.com/useLocalStorage/

вы бы использовали его вот так

  const [transactions, setTransactions] = useLocalStorage('transactions', []);

 useEffect(() => {
     const newTransactions = getUserTransactions();
     setTransactions(newTransactions);
 }, []);

Ответ №2:

Вы можете обновить локальное хранилище, просто снова установив значение для ключа.
Нравится :
foo.jsx 

     class foo extends React.Component {
        constructor(){
          localStorage.setItem("foo", "foo"); 
        }
    
        updateStorage = (val) => {
           localStorage.setItem("foo", val); 
        }
    
        render(){
            return(
                <div>
                    <button onClick="() => this.updateStorage("foobar")">Update storage</button>
                    <h3>{{ localStorage.getItem("foo") }}</h3>
                </div>
            )
        }
    
    }
Метки: