Javascript 切换按钮JS更改LocalStorage中的值

我试图在列表旁边创建一个收藏夹按钮，用户可以随时打开或关闭该按钮，并将值存储在localstorage中，以便在刷新时保存。我如何创建一个按钮，当单击该按钮时，该按钮将变为黄色并将本地存储更新为“收藏夹”：True，如果再次按下该按钮，该按钮将返回默认值并将本地存储更新为“收藏夹”：False。谢谢

function favourite(element) {

    var allPlaces = JSON.parse(localStorage.getItem("allPlaces"));

    if (allPlaces.favourite == true) {
        allPlaces.favourite = false;
        element.querySelector('ion-icon').setAttribute('name', 'star-outline');
    } else {
        allPlaces.favourite = true;
        element.style.color = '#FFE234';
        element.querySelector('ion-icon').setAttribute('name', 'star');
    }
    localStorage.setItem("allPlaces", JSON.stringify(allPlaces));
}

这些是本地存储（LS）中的对象。

“标题”：标题，
“描述”：描述，
“类别”：类别，

---

“收藏夹”：false

这应该适合您

window.onload = function () {
  const btn = document.getElementById("button");
  const allPlaces = JSON.parse(localStorage.getItem("allPlaces"));

  if (allPlaces && allPlaces.favourite) {
    btn.style.color = "#FFE234";
  } else {
    btn.style.color = "#000000";
  }
};

function favourite(element) {
  var allPlaces = JSON.parse(localStorage.getItem("allPlaces")) || {};

  if (allPlaces.favourite === true) {
    allPlaces.favourite = false;
    document.querySelector("ion-icon").setAttribute("name", "star-outline");
    element.style.color = "#000000";
  } else {
    allPlaces.favourite = true;
    element.style.color = "#FFE234";
    document.querySelector("ion-icon").setAttribute("name", "star");
  }
  localStorage.setItem("allPlaces", JSON.stringify(allPlaces));
}

Fav

您应该根据喜爱的道具有条件地渲染按钮， 因此，当需要更改收藏夹时，应在localStorage中设置新值

首先使用JSON.parse检索对象

let place = JSON.parse(localStorage.getItem('myPlaces'))

然后直接更改“最喜爱”道具

并将新对象存储在localStorage中：

const newPlaceStringified = JSON.stringify(newValue)
localStorage.setItem('myPlaces', newPlaceStringified )

因此，下次正确保存您的收藏夹时，可以有条件地渲染按钮和逻辑

function favourite(element) {

    var allPlaces = JSON.parse(localStorage.getItem("allPlaces"));

    if (allPlaces["favourite"] == true) {
        
        localStorage.setItem(
                      'myItem',
                      JSON.stringify({
                        ...item1,
                        favourite: false,
                       }),
       )
    
        element.querySelector('ion-icon').setAttribute('name', 'star-outline');

    } else {
            localStorage.setItem(
              'myItem',
              JSON.stringify({
                ...item1,
              favourite: true,
               }),
            )

        element.style.color = '#FFE234';
        element.querySelector('ion-icon').setAttribute('name', 'star');
    }
    

    
}

---

老实说，我不明白你在说什么。请你说清楚一点好吗？非常感谢。没问题，我用我的意思更新了函数，我认为这里的问题是，当您编写“newPlaces.favorite=false或true”时，您没有将此值保存在任何位置，因此在该函数的下一次呈现中，allPlaces根本没有更改，因此您应该使用新值刷新localStorage，我希望这能奏效！！！非常感谢，它工作得非常好！有没有一种方法可以覆盖当前对象而不是创建一个新对象？在这种情况下，您必须调用localStorage两次，或者很快在另一种方法中，只需不使用modifiedString并直接使用JSON更新localStorage。stringify，我现在完成了更改itI我尝试了您建议的方法，但不起作用。我已经有了一个带有onclick的按钮，我所需要的只是将favorite设置为false或true，就像在favorite函数中一样。

const newPlaceStringified = JSON.stringify(newValue)
localStorage.setItem('myPlaces', newPlaceStringified )

function favourite(element) {

    var allPlaces = JSON.parse(localStorage.getItem("allPlaces"));

    if (allPlaces["favourite"] == true) {
        
        localStorage.setItem(
                      'myItem',
                      JSON.stringify({
                        ...item1,
                        favourite: false,
                       }),
       )
    
        element.querySelector('ion-icon').setAttribute('name', 'star-outline');

    } else {
            localStorage.setItem(
              'myItem',
              JSON.stringify({
                ...item1,
              favourite: true,
               }),
            )

        element.style.color = '#FFE234';
        element.querySelector('ion-icon').setAttribute('name', 'star');
    }
    

    
}