这是我的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();
1条答案
按热度按时间xt0899hw1#
这样它们就不会泄露,任务就不会显示在另一个网页上?
JavaScript程序(在
<script>
元素的上下文中)只存在于元素所在的页面中,因此不会发生这种情况。保存的信息似乎泄漏到其他JS文件。
为了避免在
<script>
元素中声明的变量与同一页面上另一个<script>
元素中同名的变量发生冲突:不要使用全局变量。或者(按我的偏好顺序):
1.使用
<script type="module"
将脚本设置为module1.将脚本 Package 在block中,并使用
const
或let
而不是var
1.将代码 Package 在IIFE中
避免implicit globals。在strict mode中运行脚本是值得的,它会将它们转换为错误,使它们更容易检测。模块自动以严格模式运行。