Question

This is probably a simple syntax error or similar, but I can’t for the life of me see it. I’ve used localStorage without problems before on much more complex structures, so I’m baffled why this doesn’t work.

$('.symbols').click(function(){
    if ($(this).attr("checked") == "checked"){
        setPreferences("symbols", true);
    } else {
        setPreferences("symbols", false);
    }
});

$('.length').on('change', function() {
    setPreferences("length", $(this).attr('value'));
});

function setPreferences (key, value) {
    console.log("Key[ " + key + " ], Val[ " + value + "]");
    localStorage[key] = value; // I've also tried "" + value
}

Setting symbols works just fine, but length is not stored. The console.log prints the intended key / value pair on the corresponding event, and I can see from the Chrome debugger that it tries to alocate space – it just isn’t there when inspecting. The order on fired events does not matter, only “symbols” is stored correctly.

Console print when selecting the value 16 from the select, “length”:

Key[length], Val[16]

Answer 1

In your example, you are using ‘length’ as key name. But as length is already a property of localstorage object, you cannot use it as a custom keyword.
Try with that and see if its working:

setPreferences("customlength", $(this).val());// as suggested on other answer, better to use .val()