Question

网站的新手，所以不熟悉设置。

我已经制作了一个供个人使用的简单javascript应用程序，它本质上是一个计算器，输出是动态的（不需要提交或按回车键来检索结果）。我希望能够记录我所做的计算，以便我可以在以后需要时回忆它们。

简单来说，我的网站上有一个输入字段，想要记录键击并将它们保存到数据库或文件中，以便稍后阅读。

我只是学习javascript，所以如果你能尽可能完整地解释它，那将非常感激！

谢谢， -John

编辑 -

添加了最简单的代码：

<html> 
<head> 
<title>Text Summation</title> 

<script type="text/javascript"> 
function calc(A,B,SUM) { 
  var one = Number(A); 
  if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
  var two = Number(document.getElementById(B).value);  
  if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } 
  document.getElementById(SUM).value = one + two; 
} 
</script> 

<body> 
<form name="form" > 
first number: 
<input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" /> 
plus second number: 
<input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" /> 
is: 
<input name="sum" value="" id="result" readonly style="border:0px;"> 
</form> 

</body> 
</html>

Answer 1

您可以使用local storage保存计算。

请注意，localStorage只是本地的。就像存储在您正在使用的物理机器上一样。因此，如果您要在笔记本电脑上访问此页面并进行一些计算，然后从桌面访问该页面，您将看不到使用笔记本电脑进行的计算。

如果你需要从不同的设备访问计算，你需要一个后端（服务器端）解决方案，比如使用php连接到mySql数据库来存储和检索信息，用一点ajax来保持一切异步。

如果您有此需求并且不想学习php，mySql和ajax，我建议Parse这基本上是一个超级易用的后端存储您只需使用javascript即可与之交互的API。我在几个项目中使用解析，没有它就会丢失。

但首先：

HTML的一个问题：

我会在调用calc()而不是两个ID和一个值时传递所有元素的ID。那样A始终是第一个元素的值，B始终是第二个元素的值。之前，A是您更改的最后一个元素的值，B是另一个元素的值。

calc()

我会在尝试调用calc()之前检查输入是否为空，否则，更改第一个元素将始终引发警报（因为第二个元素仍为空）。
如果输入无效，我不会继续，你可以设置为0，但我不知道这对你有什么好处。虽然，你可能有这个理由。

解决这些问题后，只需在设置结果后使用本地存储来存储变量，如下所示。评论应该可以帮助您了解正在发生的事情

如果您的计算不仅仅包括添加，我会存储另一个变量以跟上执行的操作以及数字。

这是a working jsFiddle

function calc(A,B,SUM) { 
    //changed the onChange in your HTML to pass both ids instead of the 
    //one value and one id, this makes sure that the values are always stored
    //in the same order as the elements themselves    
    A= document.getElementById(A).value;
    B= document.getElementById(B).value;

    //dont continue if either field is empty
    //since you're probably not done inputting yet
    if(A=='' || B=='') return;

    //dont continue if enrties not valid    
    if( isNaN( Number(A) ) ){
        alert('Invalid entry for A:'+ A)
        return;
    }
    else if( isNaN( Number(B) )){
        alert('Invalid entry for B: '+ B)
        return;
    }
    A = Number(A); 
    B = Number(B); 
    document.getElementById(SUM).value = A + B;

    //store the calculations
    storeVars( A, B, (A + B));
}


function storeVars( A, B, C){
        // make sure the browser supports local storage 
        if (typeof(Storage) != 'undefined'){

            // create an array to hold our calculations
            var calcs = [ A, B, C];

            //check if we aready have some calculations saved
            if(localStorage.getItem('myCalculations')){

                //if so get the saved calculations as an array
               var myCalculations = JSON.parse(localStorage['myCalculations']);

               //add the new calculations to the array then update `localStorage["myCalculations"] ` 
               myCalculations.push( calcs  );
               localStorage["myCalculations"] = JSON.stringify( myCalculations );

            }
            else{
                //if no `myCalculations` exists in localStorage
                //create an multidimensional array holding just the current `eventSelctd`
                localStorage["myCalculations"] = JSON.stringify( [ calcs ] )
            }
        }
        else {
             document.getElementById("test").innerHTML = "Sorry, your browser does not support Web Storage...";
        }

}


//this method is just to show how to retrieve calcs
function showCalcs(){

        if (typeof(Storage) != 'undefined'){

            //check if we aready have some calculations saved
            if(localStorage.getItem('myCalculations')){

                //if so get the saved calculations as an array
               var myCalculations = JSON.parse(localStorage['myCalculations']);

               //clear any previously displayed calculations
               document.getElementById("test").innerHTML = '';

               //loop through the array of calculations
              for(var i = 0; i < myCalculations.length; i++ ){

                //myCalculations is an array of arrays 
                //access it like myCalculations[0][0] to get var `A` from above from the first set of calculations
                var current = myCalculations[i][0]+' + '+myCalculations[i][4]+' = '+myCalculations[i][5]+'<br>';
                document.getElementById("test").innerHTML += current;
              }

            }
        }  
}

//this method is just to show how to clear the stogare
function clearCalcs(){
  localStorage.clear();
  document.getElementById("test").innerHTML = ''
}

如何使用javascript有效地记录用户输入并存储在数据库中？

1 个答案: