ijavascript. function call as condition in ternary operator. strange behavior

Question

I can't figure out what is wrong..

const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

toggleKls() doesn't work as intended, I've even tried to switch places of exprIfTrue and exprIfFalse , but window.localStorage.getItem(kls) remains the same, as initiated

isKls() also doesn't work, it always evaluates to true for some reason..

When I test this expression like this

testo = (r)=>r
testo(true) ? false : true
//false
testo(false) ? false : true
//true

It works just fine, and it looks like I'm doing the same thing below, but apparently not, and I cant understand why..

//<FOR DEVELOPMENT
const ls = window.localStorage;
const kls = "keyListenSwitch";
const isKls = ()=> ls.getItem(kls);

console.warn(`kls: ${isKls()} test: ${ls.getItem("test")} kls by hand: ${window.localStorage.getItem(kls)}`)
const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

//get any key if switch is on
document.body.addEventListener(
    'keydown',
    gHandler( 
        e=> isKls(),
        e=> console.log(`event: ctrl:${e.ctrlKey} alt:${e.altKey} shift:${e.shiftKey} key:${e.keyCode}\nkls: ${isKls()}`),
        500),
    false);

//toggle switch to get any key
document.body.addEventListener(
    'keydown',
    gHandler( 
        e=> e.ctrlKey && e.altKey && e.keyCode == 76,//l
        ()=>{ 
            toggleKls();
            console.warn(`TOGGLE Dev:\nListen To Any Key Switch is: ${ isKls() ? "ON" : "OFF"}`);
        },
        500),
    false);

//>for development
//>bindings

CONSOLE OUTPUT:

const ls = window.localStorage;
const kls = "keyListenSwitch";
const isKls = ()=> ls.getItem(kls);
const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");
isKls()
"false"
//it's false and should toggle to true in that case, but it's not
ls.setItem(kls, true)
undefined
isKls()
"true"
throwByKey.js:334 event: ctrl:true alt:false shift:false key:17
kls: true
throwByKey.js:334 event: ctrl:true alt:true shift:false key:18
kls: true
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:false alt:true shift:false key:18
kls: false
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:true alt:true shift:false key:76
kls: false
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:true alt:false shift:false key:17
kls: false
throwByKey.js:334 event: ctrl:false alt:true shift:false key:18
kls: false

This function actually declared above anything else, but I'm placing it here just to be more clear

//TOOLS
function gHandler (ruler,action,cd){//cool down
    let lcd = 0;
    let iscd = ()=>{ 
        let t = new Date().getTime();
        let tmp = t - lcd; 
        return lcd = t, tmp >= cd}

    return function (e) {
        if (ruler(e) && iscd()) {
            action(e);
        }
    }
}
//tools

Answer 1

This line seems a bit suspicious.

const isKls = ()=> ls.getItem(kls);

The thing is localStorage.getItem(key) returns string value. "true" === true will result in false. You'd have to eval that thing or change condition. The same thing with "false"