JavaScript中如何防止变量泄露？

Question

这是我的 JavaScript 代码，我的网站每个页面都有 1 个 js 文件。它用于任务管理器，它保存、获取和显示网页中的数据，但是保存的信息似乎泄漏到其他 js 文件。

这是我的代码，我怎么可能包含这些变量，这样它们就不会泄漏并且任务会显示到另一个网页？ 网站：https://dailytaskmanager-ss.netlify.app/

var myObj= { 
    textSelect: function(){
        document.getElementById('description').select();
    },

    hide: function() {
    document.getElementById("form").style.display = "none";
    document.getElementById("show").style.display = "inline-block";

},
    show:function(){

    document.getElementById("form").style.display = "block";
    document.getElementById("show").style.display = "none";
    document.getElementById('myDate').valueAsDate = new Date();
    },
    removeTask: function () {
    var id = this.getAttribute('id');
    var myTasks = returnToDo();
    myTasks.splice(id, 1);
    localStorage.setItem('myData', JSON.stringify(myTasks));
    document.getElementById('myTasks').innerHTML = '';
    showMyTasks();
    console.log('delete');

}
};
function returnToDo(){
    var myTasks = [];
    var myTasksTemp = localStorage.getItem('myData');
    if(myTasksTemp != null){
        myTasks = JSON.parse(myTasksTemp);
    }
    return myTasks;
}
function Task(){
    this.name = document.getElementById('name').value;
    this.subject = document.getElementById('subject').value;
    this.date = document.getElementById('myDate').value;
    this.describe = document.getElementById('description').value;
}
function newTask(x,y,z,o){
    document.getElementById('myTasks').innerHTML +=
        '<div class="col l3 m4 s12 animated zoomIn"> <h4>'+z+  ':</h1>'+
        '<p>'+y+'</p>' +
        '<p>By: '+x+'</p>' +
        '<p>Due: ' +o +'</p>'+
        '<div class="btn red" >Delete</div>'+
    '</div>'
}
function showMyTasks(){
    var myTasks = returnToDo();
    document.getElementById('myTasks').innerHTML = '';
    for(var i=0;i<myTasks.length;i++){
        newTask(
            myTasks[i].name,
            myTasks[i].describe,
            myTasks[i].subject,
            myTasks[i].date
        );
    }
    var button = document.getElementsByClassName('red');
    for (var j = 0; j < button.length; j++) {
        button[j].addEventListener('click', myObj.removeTask);
        console.log(button[j].addEventListener('click', myObj.removeTask));

    }
}
function submitInfo(){
    var myTasks = returnToDo();
    myTasks.push(new Task);
    localStorage.setItem('myData',JSON.stringify(myTasks));
    showMyTasks();
    myObj.hide();
}
showMyTasks();

Answer 1

这样他们就不会泄露，任务会显示到另一个网页上吗？

JavaScript 程序（在

<script>

元素的上下文中）只存在于该元素出现的页面内，所以这不会发生。

保存的信息似乎泄漏到其他 js 文件。

为了避免在

<script>

元素中声明的变量与同一页面上另一个

<script>

元素中的同名变量发生冲突： 不要使用全局变量。

任一个（按我的喜好顺序）：

1. 使用

   <script type="module"

   使您的脚本成为module
2. 将脚本包裹在block中并使用

   const

   或

   let

   代替

   var

3. 将您的代码包装在 IIFE

还要避免隐式全局变量。值得在 strict mode 下运行您的脚本，这会将它们转化为错误，以便更容易检测到。模块自动以严格模式运行。