这是从 localStorage 数组中删除项目的正确方法吗？

Question

当点击 pushFrontBtn 时，一个表情符号添加到 localStorage 数组的前面，当点击 pushBackbtn 时，一个表情符号被添加到 localStorage 数组的后面。应用程序的这方面功能正常。

我的问题的重点是从数组 shift() 中删除索引项的 removeFront() 函数，以及从数组中删除最后一项的 removeEnd() 函数。这两个功能都在工作，但是在管理时使用的语法是否理想 - 更新状态和从 localStorage 中删除项目？


import {React, useState} from 'react';

function App() {

  const [, setEmjoiArr] = useState([])
  const [inputValue, setInputValue] = useState({ value: ""})

 // set localStorage key
  const LOCAL_VALUE = "emojis";

  //getLocal() is a utility function which retrieves from localStorage
  // or returns the default array if nothing is in localStorage, and parse the JSON
  const getLocal = (key) => {
     return JSON.parse(localStorage.getItem(key) || "[]");
  }

  // setLocal() is a utility function that passes a key and value which the key can later be used to 
  // to retrieve value(s) from localStorage
  const setLocal = (key, value) => {
     localStorage.setItem(key, JSON.stringify(value));
  }

  // EmjoiValues retrieves localStorage using the key declared above "LOCAL_VALUE"
  const EmjoiValues = getLocal(LOCAL_VALUE)

  // passes all EmjoiValues items from localStorage and includes new value from input field
  // then assigns to updateEmjoiArr
  let updateEmjoiArr = []

  // console.log(EmjoiValues)

  const pushFrontBtn = () => {
    setEmjoiArr((prev) => [inputValue.value, ...prev])

    //updateEmjoiArr so that new items will be add at beginning of array
    updateEmjoiArr = [inputValue.value, ...EmjoiValues]
    setLocal(LOCAL_VALUE, updateEmjoiArr)

    setInputValue({value: ""})
  }

  const pushBackBtn = () => {
    setEmjoiArr((prev) => [...prev, inputValue.value])

    //updateEmjoiArr so that new items will be add at end of array
    updateEmjoiArr = [...EmjoiValues, inputValue.value]
    setLocal(LOCAL_VALUE, updateEmjoiArr)

    setInputValue({ value: "" })
  }


  const removeFront = () => {
//IS THIS SNYTAX CORRECT FOR REMOVING FIRST ITEM FROM ARRAY LOCALSTORAGE?
   let [first,...rest] = EmjoiValues
   
   setEmjoiArr((prev) => [...prev, rest])
   setLocal(LOCAL_VALUE, rest)
  }

  const removeEnd = () => {
   //IS THIS SNYTAX CORRECT FOR REMOVING LAST ITEM FROM ARRAY LOCALSTORAGE?
   EmjoiValues.splice(-1, 1)

   setEmjoiArr((prev) => [...prev, EmjoiValues])
   updateEmjoiArr = [EmjoiValues]
  setLocal(LOCAL_VALUE, updateEmjoiArr)

  }


  const handleChange = event => {
    const {name, value} = event.target;
    setInputValue(prev => {
      return {
        ...prev,
        [name]: value
      }
    })
  }

   const emojiItems = EmjoiValues.map((emoji) => {
     return <li key={emoji}>{emoji}</li>
   })

  
  return (
    <main>
      <ul>{emojiItems}</ul>
      <input
        className="emjoi-input"
        name="value"
        type="text"
        value={inputValue.value}
        onChange={handleChange}
      />

      <div className="buttonContainer">
        <button className="push-front-btn" onClick={pushFrontBtn}>
          Add Emoji to Front
        </button>
        <button className="push-back-btn" onClick={pushBackBtn}>
          Add Emoji to End
        </button>
      </div>

      <div className="buttonContainer">
        <button className="shift-btn" onClick={removeFront}>
          Remove Front Emoji
        </button>
        <button className="pop-btn" onClick={removeEnd}>
          Remove End Emoji
        </button>
      </div>
    </main>
  )
}

export default App;```

Answer 1

setLocal 正在设置一个空值以防您尝试删除。如果你想删除它，该密钥将跨会话使用

localStorage.removeItem('name');

Answer 2

抱歉，我误解了你的问题：

  const removeFront = () => {
   let [first,...rest] = EmjoiValues   
   setEmjoiArr(rest)
   setLocal(LOCAL_VALUE, rest)
  }

  const removeEnd = () => {   
   EmjoiValues.splice(-1, 1)
   setEmjoiArr(EmjoiValues)
   setLocal(LOCAL_VALUE, EmjoiValues)
  }

这是从 localStorage 数组中删除项目的正确方法吗？

Is this the correct way to remove items from localStorage array?

arrays

state

splice

spread

reactjs