state doesn't change

stay false in this case even when set to true

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="cache-control" content="no-cache">
    </head>
    <body>
        <input id="diff_search_box" type="checkbox">
    </body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    console.log(document.getElementById("diff_search_box").checked)

    if (localStorage.getItem("diff_search") == undefined) {
        localStorage.setItem("diff_search", "")
    }
    
    if (localStorage.getItem("diff_search") == true) {
        document.getElementById("diff_search_box").checked = true;
        document.getElementById("diff_search_box").checked = Boolean(localStorage.getItem("diff_search"))
    }

    document.getElementById("diff_search_box").addEventListener("change", function() {
        if (this.checked){
            localStorage.setItem("diff_search", true)
        } else {
            localStorage.setItem("diff_search", "")
        }
    });
});