Question

我正在使用localStorage制作一个简单的目标跟踪完全离线HTML5应用。

我面临的问题是，检索JSON数据在单独的文件中完全正常，但在作为更大系统的一部分放在一起时则不行。

我会把它保存在一个单独的文件中并且不再担心它，但我不能这样做因为同源策略。

以下是作为单独文件正常工作的代码：

<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
window.onload = function(){
// setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
    + date2 + '","noofdays":"' + diff + '","active":"'
    + active + '"}]}';
localStorage.setItem("goals",data);   

// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr); 
for (i=0; i<goalsObj.goals.length; i++) {
  if(goal==goalsObj.goals[i].goal) {
    document.body.appendChild(document.createTextNode(
        "The goal is " + JSON.stringify(goalsObj.goals[i])));
  }
}
}
</script>
</BODY>
</HTML>

现在这里是应该工作的代码，因为它的所有不同部分工作正常，所有语法都是正确的，但它仍然绝对没有输出：

<HTML>
<HEAD>
</HEAD>
<BODY>
<script type="text/javascript">
function save()
{
//Get data from the form
var goal = document.getElementById("goal").value;       //Get 'goal' from form
var date2 = document.getElementById("date2").value;      //Get 'duedate' from the form
var active = document.getElementById("active").value; //Get 'active' from form
//Calculating the number of days remaining
var date1 = new Date();      //Current Date and Time
var dd = date1.getDate();    //Current Date
var mm = date1.getMonth()+1; //January is 0!
var yyyy = date1.getFullYear();  //Current Year
if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} date1 = mm+'/'+dd+'/'+yyyy;   //Parsing the date to the required format
var diff =  Math.floor(( Date.parse(date2) - Date.parse(date1) ) / 86400000);    //Calculate no. of days remaining
if (localStorage.getItem('gcount') === null) {
    localStorage.setItem('gcount', "1");
    var data = '{"goals":[{"goal":"'+goal+'","duedate":"'+date2+'","noofdays":"'+diff+'","active":"'+active+'"}]}';
    localStorage.setItem("goals",data);
    //document.getElementById("temp").innerHTML="first";
}
else{
    var goalsStr = localStorage.getItem("goals");
    var goalsObj = JSON.parse(goalsStr);
    var goal = "CN"
    var data = {  "goal": goal,  "duedate": date2,  "noofdays": diff, "active": active};
    goalsObj.goals.push(data);
    localStorage.setItem("goals", JSON.stringify(goalsObj));

}
} 

function load(){
/* // setup
var goal = "CN";
var date2 = new Date();
var diff = 0;
var active = true;http://jsfiddle.net/#save
var data = '{"goals": [{"goal":"' + goal + '","duedate":"'
    + date2 + '","noofdays":"' + diff + '","active":"'
    + active + '"}]}';
localStorage.setItem("goals",data);     */

// test
var goalsStr = localStorage.getItem("goals");
var goalsObj = JSON.parse(goalsStr); 
for (i=0; i<goalsObj.goals.length; i++) {
  if(goal==goalsObj.goals[i].goal) {
   document.getElementById("duedate").innerHTML=goalsObj.goals[i].duedate;
   document.getElementById("noofdays").innerHTML=goalsObj.goals[i].noofdays;
   document.getElementById("active").innerHTML=goalsObj.goals[i].active;
   // document.body.appendChild(document.createTextNode("The goal is " + JSON.stringify(goalsObj.goals[i])));
  }
}
} 
</script>
<form name="input" onsubmit="save(); return false;">

<label>Goal: </label> <input type="text" name="goal" id="goal"><br>

<label>Due Date: </label> <input type="date" name="date2" id="date2"></span><br>

<label>Active: </label><br>
<input type="radio" name="active" id="active" value="Future">Future <br>
<input type="radio" name="active" id="active" value="Present">Present <br> <br>

<!-- Submit button to submit the form -->
<input type="submit" value="submit">
</form>

<form name="load" onsubmit="load(); return false;">

<label>Goal: </label> <input type="text" name="goal" id="goal"><br>
<input type="submit" value="submit">
<p id="temp"></p>
<p id="temp1"></p>
<p id="temp2"></p>
<p id="temp3"></p>
<p id="temp4"></p>
<p id="temp5"></p>
<p id="temp6"></p>
<p id="temp7"></p>
<p id="temp8"></p>
<p id="duedate"></p>
<p id="noofdays"></p>
<p id="active"></p>
</BODY>
</HTML>

我收到对象不是函数的错误。我在StackOverflow上尝试了所有其他类似的问题，没有任何效果。

怎么了？我该怎么办？

Answer 1

您对多个不同的元素使用相同的ID。另外，尝试使用IndexedDB而不是localStorage。

javaScript代码在单独的文件中工作但不是更大文件的一部分

1 个答案: