Javascript 布尔切换并保存到localStorage不切换addClass

当我在

localStorage

中保存

boolean

值

true/false

时，尝试执行

addToWishlist

功能，以便保存项供以后查看，但不保存

.addClass

jQuery。我正在将它保存到

localStorage

，因此如果用户刷新页面，它仍然会保存他们保存的项目

如何根据保存在

localStorage true/false

中的值正确修复

addClass

切换

<button onclick="wishList()" class="btn btn-default wishlist"><i class="fa fa-heart" aria-hidden="true"></i> Add to wishlist</button>

---

您可以使用有条件的

切换类（）

：

---

希望这有帮助。

您可以使用条件的

toggleClass（）

：

希望这有帮助。

试试jquery的

方法将更改为

function wishList() 
{
    localStorage.setItem('wishlists', !(addToWishlist=="true"));
    $(this).find('.fa').toggleClass('add-to-wishlist');
}

或将状态添加到

toggleClass

var addToWishlist = localStorage.getItem('wishlists');
function wishList() 
{
    addToWishlist = !( addToWishlist == "true" || addToWishlist == true );
    localStorage.setItem('wishlists', addToWishlist );
    $(this).find('.fa').toggleClass('add-to-wishlist', addToWishlist );
}

尝试使用jquery的

方法将更改为

function wishList() 
{
    localStorage.setItem('wishlists', !(addToWishlist=="true"));
    $(this).find('.fa').toggleClass('add-to-wishlist');
}

或将状态添加到

toggleClass

var addToWishlist = localStorage.getItem('wishlists');
function wishList() 
{
    addToWishlist = !( addToWishlist == "true" || addToWishlist == true );
    localStorage.setItem('wishlists', addToWishlist );
    $(this).find('.fa').toggleClass('add-to-wishlist', addToWishlist );
}

---

较短的方法是使用

toggleClass

，它可以将布尔值作为第二个参数：

$(this).find('.fa').toggleClass('add-to-wishlist', !wishlistItems);

---

较短的方法是使用

toggleClass

，它可以将布尔值作为第二个参数：

$(this).find('.fa').toggleClass('add-to-wishlist', !wishlistItems);

---

wishlistItems

始终返回false，因为它声明并分配了外部函数。
将数据关联到

localStorage后，在函数中添加
wishlistItems=localStorage.getItem（'wishlists'）

var wishlistItems = localStorage.getItem('wishlists');
var addToWishlist = false;
function wishList() {
    addToWishlist = !addToWishlist;
    localStorage.setItem('wishlists', addToWishlist);
    wishlistItems = localStorage.getItem('wishlists')
     $(".wishlist").find('.fa').toggleClass('add-to-wishlist');
}

根据评论更新答案

根据，我们无法将布尔值保存到本地存储

function wishList(onload) {
  var addToWish = (localStorage.getItem('wishlists')  == "true");
  var wishlistItems = (onload)?addToWish:!addToWish;
    localStorage.setItem('wishlists', wishlistItems);
     $(".wishlist").find('.fa').addClass('add-to-wishlist');
     if(wishlistItems === false){
       $(".wishlist").find('.fa').removeClass('add-to-wishlist');
     }
}
$(function(){
  wishList(true);
})

也调用相同的函数onload。
wishList（true）传递一个变量以仅将wishList值保存到AOD

wishlistItems
在声明和分配外部函数时始终返回false。

将数据关联到
localStorage

var wishlistItems = localStorage.getItem('wishlists');
var addToWishlist = false;
function wishList() {
    addToWishlist = !addToWishlist;
    localStorage.setItem('wishlists', addToWishlist);
    wishlistItems = localStorage.getItem('wishlists')
     $(".wishlist").find('.fa').toggleClass('add-to-wishlist');
}

根据评论更新答案

根据，我们无法将布尔值保存到本地存储

function wishList(onload) {
  var addToWish = (localStorage.getItem('wishlists')  == "true");
  var wishlistItems = (onload)?addToWish:!addToWish;
    localStorage.setItem('wishlists', wishlistItems);
     $(".wishlist").find('.fa').addClass('add-to-wishlist');
     if(wishlistItems === false){
       $(".wishlist").find('.fa').removeClass('add-to-wishlist');
     }
}
$(function(){
  wishList(true);
})

也调用相同的函数onload。
wishList（true）传递一个变量以仅将wishList值保存到AOD

关于使用
toggleClass（）
的答案很多，这很好，但这不是你真正的问题

您正在使用
$（this）
尝试查找元素，但是
this
没有引用您认为它引用的内容。在本例中，它是
wishList（）
函数的作用域，而不是单击的元素

将
事件添加到onclick事件中

<button onclick="wishList(event)" ...>...</button>

要在加载页面时添加类，只需从本地存储中获取数据，然后根据需要添加类

但是，由于您需要直接引用元素，而不是基于上面的事件，因此最好始终直接引用元素

例如，只需将其放入
$（document）.ready（）函数中即可

var lsWishList = localStorage.getItem('wishlists');
if(lsWishList == true) {
    $(".wishlist").find('.fa').addClass('add-to-wishlist');
}

关于什么是真实的注释

使用此比较时要小心。字符串值将返回TRUE（使用
==
）-并且由于本地存储只能可靠地用于存储字符串，您可能需要重新考虑如何存储该数据
 关于使用
toggleClass（）
的答案很多，这很好，但这不是你真正的问题

您正在使用
$（this）
尝试查找元素，但是
this
没有引用您认为它引用的内容。在本例中，它是
wishList（）
函数的作用域，而不是单击的元素

将
事件添加到onclick事件中

<button onclick="wishList(event)" ...>...</button>

要在加载页面时添加类，只需从本地存储中获取数据，然后根据需要添加类

但是，由于您需要直接引用元素，而不是基于上面的事件，因此最好始终直接引用元素

例如，只需将其放入
$（document）.ready（）函数中即可

var lsWishList = localStorage.getItem('wishlists');
if(lsWishList == true) {
    $(".wishlist").find('.fa').addClass('add-to-wishlist');
}

关于什么是真实的注释

使用此比较时要小心。字符串值将返回TRUE（使用
==
）-并且由于本地存储只能可靠地用于存储字符串，您可能需要重新考虑如何存储该数据
 嗯。那么问题是什么呢？是的，很抱歉我错过了这个哈哈，我如何根据保存在
localStorage
中的布尔值修复
addClass
位？请解释您的否决票。我没有否决。好的。那么问题是什么？是的，很抱歉我错过了这个哈哈，我如何根据保存在
localStorage
中的布尔值修复
addClass
位？请解释您的否决票。我没有否决。localStorage包含字符串。非空字符串为truthy.localStorage包含字符串。非空字符串是真实的。这是更好地使用
toggleClass
+1。很抱歉，我要删除这个答案的第一部分。好了，很好+1这是更好地使用
toggleClass
+1简而言之，我将删除此答案的第一部分。好了，很好+1这很整洁，不需要
如果
语句，我如何在页面刷新时让类停留？
！（addToWishlist==“true”）什么？这太可怕了。@Cerbrus如果
addToWishlist
为true，它会将值更改为false或true。。。。更糟糕的是。查看OP.ohh中使用的条件，遗漏了
addToWishlist
与
wishlistitems
不同的部分。误读了这个问题，我的错。哦，那太好了。不需要
如果
语句，当页面刷新时，我怎样才能让类保持不变？
！（addToWishlist==“true”）什么？这太可怕了。@Cerbrus如果
addToWishlist
为true，它会将值更改为false或true。。。。一