如何使用钩子更新存储在 localStorage 中的数组？答案

【问题标题】：How to update an array stored in the localStorage using hooks?如何使用钩子更新存储在 localStorage 中的数组？
【发布时间】：2020-09-14 11:50:50
【问题描述】：

所以我有一个组件，当单击该组件时，它必须将城市的 ID 存储在 localStorage 的数组中。我正在为此使用自定义挂钩，如下所述。我面临的问题是，每当单击组件时，它都会完全重写 localStorage 中的值，而不是推送新值。

import React, {useEffect, useState} from  'react';
import styled from 'styled-components';

const Container = styled.div`
   background-color: white;
   display: flex;
   position: relative;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   cursor: pointer;
   padding: 2rem;
   margin-top: 2rem;
   transition: all 0.2s ease;
   border-radius: 5px;
   box-shadow: 0 .1rem 1rem 5px rgba(0,0,0,0.07);
   &:hover{
     box-shadow: 0 .1rem 1rem 5px rgba(0,0,0,0.16);
     transform: translateY(-3px);
   }
`;
  const SearchedCity = (props) => {
  const [storedId, setId] = useLocalStorage('ids', []); 

  let handleId = () => {
     setId(prev => [...prev, props.cityId]);
  }

  return (
     <Container onClick={handleId}>
         {props.children}
     </Container>
  )
 }


 const useLocalStorage = (key, initialValue) => {
   const [storedId, setStoredValue] = useState(() => {
     try {
       const item = window.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
     } catch (err) {
       console.error(err);
       return initialValue;
     }
   });

   const setValue = value => {
     try {
       const valueToStore =
       value instanceof Function ? value(storedId) : value;
       setStoredValue(valueToStore);
       window.localStorage.setItem(key, JSON.stringify(valueToStore));
     } catch (err) {
       console.error(err);
     }
   };

   return [storedId, setValue];
 };

 export default SearchedCity;

【问题讨论】：

标签： reactjs react-hooks local-storage

【解决方案1】：

在更新 localStorage 值之前，您可以执行以下操作：

获取本地存储值。在您的情况下，它应该包含字符串化数组。
解析它。
将新值添加到已解析的数组中。
对数组进行字符串化并更新本地存储。

const array = localStorage.get(yourKeyHere);
const parsedArray = array ? JSON.parse(array) : [];
const newArray = [...parsedArray, newItem];
localStorage.set(yourKeyHere, JSON.stringify(newArray));

【讨论】：