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

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

javascript dynamic

如何使用javascript高效地记录用户输入并存储在数据库中？,javascript,dynamic,calculator,record,keystroke,Javascript,Dynamic,Calculator,Record,Keystroke,新到的网站，所以不太熟悉的设置我制作了一个简单的javascript应用程序供个人使用，它本质上是一个计算器，输出是动态的，不需要提交或按enter键来检索结果。我希望能够记录我所做的计算，以便在以后需要时能够回忆起它们简单地说，我的网站上有一个输入字段，我想记录击键并将其保存到数据库或文件中，以便以后阅读我只是在学习javascript，如果您能尽可能完整地解释它，我将不胜感激谢谢， -约翰编辑- 以最简单的形式添加了代码： <html> <head> &

新到的网站，所以不太熟悉的设置

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

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

我只是在学习javascript，如果您能尽可能完整地解释它，我将不胜感激

谢谢， -约翰

编辑-

以最简单的形式添加了代码：

<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>

您可以使用保存您的计算

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

如果您需要从不同的设备访问计算，那么您将需要一个后端服务器端解决方案，比如使用php连接到mySql数据库来存储和检索信息，可能需要一点ajax来保持所有内容的异步

如果您有这种需要，并且不想学习php、mySql和ajax，我建议您使用它，它基本上是一种非常易于使用的后端存储API，您可以仅使用javascript进行交互。我在几个项目中使用了parse，如果没有它，我将不知所措

但首先：

您的HTML有一个问题：

我会在调用calc时传递所有元素的id，而不是两个id和一个值。这样，A总是第一个元素的值，B总是第二个元素的值。之前，A是您更改的最后一个元素的值，B是另一个元素的值。 calc的几个问题

在尝试调用calc之前，我会检查输入是否为空，否则，更改第一个元素将始终导致警报，因为第二个元素仍然为空。如果输入无效，我不会继续，您可以将其设置为0，但我看不出这对您有什么好处。不过，你可能有这样的理由。解决这些问题后，只需在设置结果后使用本地存储来存储变量，如下所示。这些评论应该有助于你理解发生了什么

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

这是

什么服务器端语言？@bjb568这是一个html网站，计算器是用javascript构建的，但是用来记录键的脚本可以是任何脚本。我不太确定，但我会考虑javascript。与其读取击键，不如在每次击键后读取输入的值，否则您将模拟用户界面cusor、delete、backspace、shift等。。如果是个人使用，并且您有一个现代浏览器，请查看输入事件：。它还将捕获复制/粘贴和拖放数据输入。我们可以看到您的HTML吗？这会有很大帮助。那么你想要长期存储还是短期存储？如果你不需要长期的，我会看看本地存储来保存values@DelightedD0D您好，我按照您的要求以最简单的形式添加了代码！嗨@delighted0d，你的回答帮助了我！很抱歉回复太晚，我正在学习如何保存到服务器端解决方案，请您也帮我做一下好吗？我看了一下parse，但不明白该怎么做。我提前道歉，我仍然觉得这很难理解。。。非常感谢您的帮助！很高兴它起到了作用，事实上，我几天前刚刚回答了一个不同的问题，解释了如何建立一个使用parse的站点，并制作了一个工作演示，请查看，如果您有任何问题，请随时告诉我。谢谢！再一次我为迟来的回复道歉，最近的工作真的很疯狂，我还没有机会坐下来冷静下来，继续读下去@愉快的

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 = ''
}