Question

我拥有的本地存储对象如下所示：水果{“ cartitem1”：“香蕉”，“ cartitem2”：“苹果”，“ cartitem3”：“草莓”}

当用户更改了cartitem3选择的项目时，我只想将cartitem3的水果从“草莓”更改为“菠萝”。其余所有内容在刷新后应保持不变。我该怎么做？我下面有这样的东西

const [fruits，setfruits] = useState（[]）;

useEffect(() => {
    const data = localStorage.getItem("Fruits");
    console.log(localStorage)
    if (data) {
        setfruits(JSON.parse(data));
    }

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

    localStorage.setItem("Fruits", JSON.stringify(fruits));
})

提前谢谢！

Answer 1

您可以从localStorage获取阵列，然后对其进行更改并再次设置。

const fruits = JSON.parse(localStorage.getItem("Fruits"));
const modifiedArray = fruits.filter(fruit => {
  
   if(fruit["cartitem"] === "strawberry"){
     fruit["cartitem"] = "pineapple"
   }
});

localStorage.setItem("Fruits", JSON.stringify(modifiedArray))

我认为类似这样的脚本会起作用。

Answer 2

useEffect(() => { 
    const data =  !localStorage.getItem('Fruits') 
                      ? []
                      : JSON.parse(localStorage.getItem('Fruits'))
  
   data['cartitem3']= 'pineapple'
   localStorage.setItem('Fruits', JSON.stringify(data))

    this.setState({Fruits: !localStorage.getItem('data') 
                      ? []
                      : JSON.parse(localStorage.getItem('data'))
              })

    
  
}

如何更新本地存储中数组的值？

2 个答案: