CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
Spedwards
Spedwards

Reputation: 4492

localStorage boolean triggers weird behavior

I'm having really strange problems with my code using localStorage...

I would post code either here or in jsfiddle but for it to work I need a bunch of resources and for some reason won't display correctly on jsfiddle. For an example, you can view the webpage I have it hosted at: http://spedwards.cz.cc/new.html

When you check one (can be any value but lets say 1 for this purpose) of the checkboxes for any hero, click Generate (in the last section) and hit refresh, all of the heroes have their activity checked even though only the one that was checked prior to the refresh should remain checked.

When checking localStorage in the console, only the checked one will have true and all the others will be on false as well which makes it weird. If someone can explain why it's doing this and/or explain an error that I've obviously missed.

Below I will post some of the functions.

Storing everything:

function storage() {
    var username = $('#username').val();
    var password = $('#password').val();

    if (typeof(Storage) != "undefined") {
        // Store user's data
        window.localStorage.setItem("username", username);
        window.localStorage.setItem("password", password);

        $.each(heroes, function(index,value){
            window.localStorage.setItem("heroActive" + index, $('input#isActive' + index).is(':checked') );
            window.localStorage.setItem("heroLevel" + index, $('input#level' + index).val() );
            window.localStorage.setItem("heroPrestige" + index, $('input#prestige' + index).val() );
        });
    } else {
        // Browser doesn't support
        alertify.alert('<b>Your browser does not support WebStorage</b>');
    }
}

Loading the values:

var username, password;
username = localStorage.getItem('username');
$('#username').val(username);

$.each(heroes, function(index,value){
    if( localStorage.getItem('heroActive' + index) ){
        $('input#isActive' + index).attr('checked', localStorage.getItem('heroActive' + index) );
    } else {
        $('input#isActive' + index).removeAttr('checked');
    }
    $('input#level' + index).val( localStorage.getItem('heroLevel' + index) );
    $('input#prestige' + index).val( localStorage.getItem('heroPrestige' + index) );
});

The list that is causing problems:

var heroes = ["Black Panther","Black Widow","Cable","Captain America","Colossus","Cyclops","Daredevil","Deadpool",/*"Doctor Strange",*/"Emma Frost",
"Gambit","Ghost Rider","Hawkeye","Hulk","Human Torch","Iron Man","Jean Grey",/*"Juggernaut",*/"Loki","Luke Cage",/*"Magneto","Moon Knight",*/"Ms Marvel",
"Nightcrawler",/*"Nova","Psylocke",*/"Punisher","Rocket Raccoon",/*"Silver Surfer",*/"Scarlet Witch","Spider-Man","Squirrel Girl",/*"Star-Lord",*/"Storm",
/*"Sue Storm",*/"Thing","Thor","Wolverine"/*,"Venom"*/];

Additionally, the last entry (Wolverine) doesn't seem to be functioning correctly. For a starter clicking the label for its activity doesn't trigger the checkbox whereas all the others do. Other problems with this entry:

errors.js:

$.each(heroes, function(index,value){
    $('input#level' + index).change(function() {
        var numbers = /^[0-9]+$/;
        var val = $('input#level' + index).val();
        if(val > 60) {
            alertify.log("Hero " + value + " cannot be above Level 60!", "", 0);
            $('#level' + index).addClass('error');
        } else if( isNumeric(val) ) {
            if( $('#level' + index).hasClass('error') ) {
                $('#level' + index).removeClass('error');
            }
        } else {
            alertify.log("Only numbers are accepted.");
            $('#level' + index).addClass('error');
        }
    });
});

function isNumeric(num){
    return !isNaN(num);
}

Upvotes: 1

Views: 608

Answers (1)

user692
user692

Reputation: 63

Anything stored in local storage returns as a string. So if you stored fooo = false in local storage, 

if(!fooo){
   bar();
}

will never execute bar();

if(fooo){
   bar();
}

will always execute bar(), since a string always is true, since the variable is not empty or false.

I've banged my head against this once as well. Kinda stupid, but hey. :)

Upvotes: 1

Related Questions