使用浏览器扩展，因此我将JS从HTML移到了JS文件现在，我的localStorage.setItem无法正常工作

问题描述

我遇到一个问题，当我尝试使用web-ext run在Firefox中测试扩展名时，页面的CSS会加载，但我的HTML都不会加载。我发现这是因为我的HTML是基于JavaScript中的if else语句加载的，并且因为扩展名不喜欢它们HTML主体中的脚本标签，所以建议我将JS移入JS文件。 / p>

现在，我已经完成了初始HTML的加载，但是当我按下提交按钮将数据设置为localStorage时，什么都没有发生。我认为这与我的JS函数基于同一文件中存在的其他函数有关，但是我试图将这些函数的顺序更改为不成功。

以下是我目前正在处理的两个（技术上是三个）功能：

function main() {
    if (localStorage.length == 0) {
        document.title = "Set up Memento Mori";
        document.getElementById("thisTab").innerHTML = 
        `<div class="container">
            <div class="title"><h3>Set up Memento Mori</h3></div>
            <form>
            <label for="birthDate">Enter your date of birth:</label>
            <input type="date" name="Birthdate"id="birthDate" placeholder="YYYY-MM-DD" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"></input>
            <button type="button" id="button">Submit</button>
            </form>
        </div>`;
    } else {
        document.title = "Memento Mori";
        document.getElementById("thisTab").innerHTML = 
        `<div class="container">
            <div class="title"><h3>Memento Mori</h3></div>
            <div id="memento-lg"></div>
            <div id="memento-sm"></div>
            <div id="clock"></div>
            <button type="submit" id="cleardob">Reset dob</button>
        </div>`;
        renderTimers();
    }
}

window.addEventListener('DOMContentLoaded',(event) => {
    main();
});

 
//-----------------------------------------------------------------------//

var birthDate; 

if (localStorage.getItem("birthDate")) {
    birthDate = localStorage.getItem('birthDate');
} else {
    birthDate = new Date();
}

$("button").click(function(){
    var dob = $("birthDate").val();

    if (typeof dob !== null) {
    const birthdate = dob.split("-");
    var parsedDate = (birthdate[0]+"-"+birthdate[1]+"-"+birthdate[2]);
    console.log(parsedDate);
    console.log(dob);
    birthDate = parsedDate;
    localStorage.setItem("birthDate",birthDate);
    } 
});

我的HTML很基本，只有一个div，在head部分和</body>标签之前都有一个脚本标签，该脚本标签引用了我的JS文件。

解决方法

目前发生的情况是

• main已注册为在DOMContentLoaded事件中运行
• $("button")运行并且找不到任何按钮，因此后续的.click()什么也不做
• 脚本完成
• DOMContentLoaded事件被触发并且main（）运行

另一个问题：

• 扩展页面只是文件，没有服务器为它们提供服务，因此提交<form>而没有action只是像按Ctrl-R热键一样重新加载页面。

解决方案很简单：

• 在html文件末尾加载脚本，以便在DOM准备就绪时运行脚本
• 删除DOMContentLoaded的内容，然后立即运行main（）
• 请勿在点击监听器中提交表单（删除type="submit"）或使用event.preventDefault（）作为提交按钮

popup.html：

  <script src=popup.js></script>
</body>

popup.js：

if (localStorage.length == 0) {
.............
} else {
.............
}
$("button").click(function (event) {
  event.preventDefault(); // in case you want to use type="submit" for whatever reason
........
});