如何防止JavaScript变量泄漏？多页面任务管理器数据串页问题处理

你的问题根源是所有页面共用了同一个localStorage键名myData，而localStorage是同源网站共享的存储，所以不同页面会读写同一份任务数据，导致跨页面显示。下面是具体的隔离方案：

1. 给每个页面设置唯一的存储键名 #

为每个页面生成专属的存储键，确保不同页面的任务数据存在不同的localStorage条目里。可以基于当前页面的路径来生成唯一标识：

// 生成当前页面专属的存储键
function getPageUniqueKey() {
    // 取当前页面的路径（比如"/math"），替换特殊字符避免非法键名
    const pagePath = window.location.pathname;
    return `task_data_${pagePath.replace(/[^a-zA-Z0-9]/g, '_')}`;
}

然后修改所有读写localStorage的代码，把原来的myData替换成这个函数返回的键：

• 修改returnToDo函数：

function returnToDo(){
    var myTasks = [];
    const storageKey = getPageUniqueKey();
    var myTasksTemp = localStorage.getItem(storageKey);
    if(myTasksTemp != null){
        myTasks = JSON.parse(myTasksTemp);
    }
    return myTasks;
}

• 修改myObj.removeTask里的存储代码：

removeTask: function () {
    var id = this.getAttribute('id');
    var myTasks = returnToDo();
    myTasks.splice(id, 1);
    const storageKey = getPageUniqueKey();
    localStorage.setItem(storageKey, JSON.stringify(myTasks));
    document.getElementById('myTasks').innerHTML = '';
    showMyTasks();
    console.log('delete');
}

• 修改submitInfo里的存储代码：

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

2. （可选）封装存储逻辑，减少重复代码 #

把页面专属的存储操作封装成工具函数，后续维护更方便：

// 页面专属任务存储工具
function PageTaskStorage() {
    const storageKey = getPageUniqueKey();

    // 获取当前页面的任务列表
    this.getTasks = function() {
        const taskData = localStorage.getItem(storageKey);
        return taskData ? JSON.parse(taskData) : [];
    };

    // 保存当前页面的任务列表
    this.saveTasks = function(tasks) {
        localStorage.setItem(storageKey, JSON.stringify(tasks));
    };
}

之后其他函数可以简化调用：

// 示例：修改returnToDo
function returnToDo(){
    const taskStorage = new PageTaskStorage();
    return taskStorage.getTasks();
}

// 示例：修改submitInfo
function submitInfo(){
    const taskStorage = new PageTaskStorage();
    var myTasks = taskStorage.getTasks();
    myTasks.push(new Task());
    taskStorage.saveTasks(myTasks);
    showMyTasks();
    myObj.hide();
}

3. 修复删除按钮的bug #

你当前的删除按钮没有设置ID，removeTask里的this.getAttribute('id')会拿到null，导致删除逻辑失效。需要在生成任务卡片时给按钮加上索引ID：

修改newTask函数，添加索引参数并设置按钮ID：

function newTask(x,y,z,o, index){
    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" id="'+index+'">Delete</div>'+    '</div>'
}

在showMyTasks循环中传索引：

for(var i=0;i<myTasks.length;i++){
    newTask(
        myTasks[i].name,
        myTasks[i].describe,
        myTasks[i].subject,
        myTasks[i].date,
        i // 传递当前任务的索引作为按钮ID
    );
}

内容的提问来源于stack exchange，提问作者Shuran Stephanus