Boolean toggle and save to localStorage not toggling addClass

Question

Trying to do a addToWishlist function so item can be saved for later viewing, when I save the boolean value true/false in the localStorage its toggling but not the .addClass jQuery. I'm saving it to localStorage so if user refresh the page it still holds the items they've saved.

How can I fix the addClass toggle properly, based on the value saved in localStorage true/false?

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

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

Plnkr sample

Yeah sorry I missed that haha, how can I fixed the `addClass` bit based on the boolean value saved in the `localStorage`? — MrNew, Apr 10 '17 at 09:01

Zakaria Acharki · Answer 1 · 2017-04-10T09:10:31.560

3

You could use a conditional toggleClass() :

$(this).find('.fa').toggleClass('some-class', !wishlistItems);

Hope this helps.

edited Apr 10 '17 at 09:10

answered Apr 10 '17 at 09:01

Zakaria Acharki

66,747
15
75
101

This is better use of `toggleClass` +1 – gurvinder372 Apr 10 '17 at 09:04
1

Frankly, I'd remove the first part of this answer. There we go, perfect. +1 – Cerbrus Apr 10 '17 at 09:09

Ionut Necula · Answer 2 · 2017-04-10T09:04:34.433

2

A shorter way would be to use toggleClass, which can take a boolean value as a second parameter:

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

edited Apr 10 '17 at 09:04

answered Apr 10 '17 at 09:03

Ionut Necula

11,107
4
45
69

localStorage contains **string**. Non-empty string is truthy. – Tushar Apr 10 '17 at 09:04

Tom · Accepted Answer · 2017-04-10T09:32:18.250

2

Many answers talking about using toggleClass(), which is fine - but that's not your real problem.

You're using $(this) to try and find an element, but this isn't referencing what you think it's referencing. In this instance, its the scope of the wishList() function - not the element that was clicked.

Add event into your onclick event;

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

Then for your wishList() function use event.target to reference the clicked element;

function wishList(event) {
    var element = event.target;
    localStorage.setItem('wishlists', !addToWishlist);
    $(element).find('.fa').toggleClass('add-to-wishlist', !addToWishlist);
}

To add the class when you load the page, you just need to grab the data from local storage, and then add the class if required.

However, as you'll need to reference the element directly rather than based off the event above - it may be better to always reference the element directly anyway.

For example, just have this inside your $(document).ready() function;

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

A note about what's TRUE

Be careful when using this comparison. A string value will return as TRUE (with ==) - and as Local Storage can only be reliably used to store strings you might need rethink how you're storing that data.

edited Apr 10 '17 at 09:32

answered Apr 10 '17 at 09:15

Tom

4,257
6
33
49

but `$(this)` would work if you're using `.click()` event instead, right? now my problem is how to retain `true` state so when page is refreshed it still has `add-to-wishlist` class. – MrNew Apr 10 '17 at 09:27
I've edited my answer to include an example. But, you need to be careful about what you're thinking is `TRUE` and what you're thinking is `FALSE`. – Tom Apr 10 '17 at 09:32
`== true` doesn't seems to be a `Boolean` but a `string`, so when I toggle it to `true` then refresh it then toggle it again stays to `true` state when it should be `"false"`. – MrNew Apr 10 '17 at 10:04
Yes, as I mentioned in my answer - Local Storage can't store Boolean values. – Tom Apr 10 '17 at 10:08
so I changed `true` to `"true"` instead but that still happening, when I re-toggle the button after being `"true"` it stays `"true"` still. Sample https://plnkr.co/edit/LWREYRpYRagK7xvtNjnv?p=preview – MrNew Apr 10 '17 at 10:12
`JSON.parse()` would convert the value to `Boolean` but my last comment is still an issue. – MrNew Apr 10 '17 at 10:22
Examine the console logs I've put in; https://plnkr.co/edit/TRcqbryxkRrbvPQACN7W?p=preview - You'll see that it requires 2 clicks of the wishlist button to toggle the Locally Stored value to false. This is because your `addToWishlist = !addToWishlist;` line is designed to work with Boolean values, not strings. – Tom Apr 10 '17 at 10:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141351/discussion-between-thebluefox-and-mrnew). – Tom Apr 10 '17 at 10:32

gurvinder372 · Answer 4 · 2017-04-10T09:12:23.810

0

Try with jquery's toggleClass

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

Method will change to

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

or adding state to 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 );
}

edited Apr 10 '17 at 09:12

answered Apr 10 '17 at 09:02

gurvinder372

66,980
10
72
94

Oh that's neat don't need `if` statement, how can I make the class stay when page is refreshed? – MrNew Apr 10 '17 at 09:06
`!(addToWishlist=="true");` what? That's horrible. – Cerbrus Apr 10 '17 at 09:08
@Cerbrus if the `addToWishlist` is true, it will change the value to false or true. – gurvinder372 Apr 10 '17 at 09:10
... And that's even worse. Look at the condition used in the OP. – Cerbrus Apr 10 '17 at 09:10
ohh, missed the part where `addToWishlist ` is different from `wishlistitems`. Misread the question, my bad. – gurvinder372 Apr 10 '17 at 09:13

score 0 · Answer 5 · edited May 23 '17 at 12:25

wishlistItems always returns false as it it declared and assigned outside function.
Add wishlistItems = localStorage.getItem('wishlists') inside function after assgining data to 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');
}

Updated Answer as per the comment

As per This link, we can't save boolean values to Localstorage

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

Call same function onload also. wishList(true) pass a variable to persist the wishlist value onlaod.

updated working example demo

how can you retain `true` state class when you refresh the page? — MrNew, Apr 10 '17 at 09:15
@MrNew please check the updated Answer, I've added working plnkr example also — S B, Apr 10 '17 at 09:43
Sure, but enforcing `true/false` state as soon as the page loads? This won't work if jquery functions is wrapped in `$(function() {});` as it will toggle every time the page is refreshed. updated my plnkr to this https://plnkr.co/edit/LWREYRpYRagK7xvtNjnv?p=preview — MrNew, Apr 10 '17 at 10:18

Boolean toggle and save to localStorage not toggling addClass

5 Answers5