Question

我正在尝试在列表旁边创建一个最喜欢的按钮，一个人可以随时打开和关闭该按钮，并将值存储在 localstorage 中，以便在刷新时保存。我将如何创建一个按钮，当点击它时它会变成黄色并将本地存储更新为“最喜欢的”：真，如果再次按下按钮将恢复为默认值并将本地存储更新为“最喜欢的”：假。谢谢

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) 内的对象

"title": 标题,
“描述”：描述，
“类别”：类别，
“最喜欢的”：假

Answer 1

这应该对你有用

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));
}

<button id='button' onclick="favourite(this)">Fav</button>

Answer 2

你应该根据最喜欢的道具有条件地渲染按钮，因此，当收藏夹必须更改时，您应该在本地存储中设置新值

首先使用 JSON.parse 检索对象

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

然后直接更改“收藏夹”道具


let newValue = {
...place,
favourite: false}

并将新对象存储在 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');
    }
    

    
}

切换按钮 JS 在 LocalStorage 中更改值

2 个答案: