Javascript jQuery-单击时切换本地存储事件

我正在尝试制作一个保存在本地存储中的收藏夹按钮，您可以打开和关闭它

但在单击时切换本地存储值时遇到问题

这就是我所拥有的：

$(fav).click(function(){
      localStorage.setItem('favourited', 'yes');
      $(this).toggleClass('favourite');
});

---

如果项目设置为加载状态，我尝试使用

removietem

，但这只会删除它一次，不允许切换。

您可以使用

hasClass（）

方法检查类是否存在，然后根据以下内容切换本地存储：

$(fav).click(function() {
  // if there is a class we set "No" to local storage
  // because the code for toggle will remove that class from the HTML
  var value = $(this).hasClass('favourite') ? 'No' : 'yes';
  localStorage.setItem('favourited', value);
  $(this).toggleClass('favourite');
});

插图

var fav=$（'.btn'）；
$（fav）。单击（函数（）{
//如果有一个类，我们将“否”设置为本地存储，因为切换代码将从HTML中删除该类
var value=$（this.hasClass（'favorite'）？'No'：'yes'；
console.log（值）；
$（this.toggleClass（'favorite'）；
});
.favorite{
颜色：绿色；
}

单击
您可以使用类的条件来定义它是否受欢迎

$(fav).on("click", function () {
    $(this).toggleClass('favourite');
    // Define wheter its a favourite item based on the class
    let val = $(this).hasClass('favourite') ? 'yes' : 'no';
    // Set the localStorage
    localStorage.setItem('favourited', val);
});

我想应该是这样的

$(fav).click(function(){

      // You should rely on the data from your local storage since user can reload your application and you cannot rely on your memory or html classes
      const fav = localStorage.getItem('favourited');

      if (fav) {
        localStorage.removeItem('favourited');
        $(this).removeClass('favourite');
      } else {
        localStorage.setItem('favourited', 'yes');
        $(this).addClass('favourite');
     }
});

仅供参考，不要对可切换状态属性使用“是”和“否”字符串，请使用布尔值
true
和
false
如果将其设置为类似
1
或
-1
的数字，然后将其乘以
-1
即可切换。另一种方法是获取它，然后更改它，比如
localStorage.setItem（'favorited'，（localStorage.getItem（'favorited'）==“yes”？“no”：“yes”）
或@Rorymcrossan提到的，您可以将其设置为boolean@SASSY_ROG或者就像我说的布尔值。然后它就变成了
！值来切换它。@RoryMcCrossan哦，是的，请阅读您的第一个响应，抱歉