如何永久和动态地将数据保存在html文件中?

时间:2014-04-07 08:33:58

标签: javascript html variables drop-down-menu textbox

好的,我正在尝试制作一个程序,允许教师编辑/设计测试,让学生接受测试。我做了下拉菜单选择问题类型和类别(历史,英语等),并有文本框来接收问题文本。我的问题是如何永久保存此文本和选择。我最初的想法是改变js文件变量的内容,但javascript是客户端。我最快需要这个最简单的选择是什么?请简单的javascript / html,没有jquery或jfiddle。请用简单的话来解释:)。我不是专业人士。 PHP还可以,但我不知道,所以我需要它清楚。如果你能提供帮助,那就太好了,因为我和另一个人没有找到一个简单的解决方案(至少在我们看来)。

3 个答案:

答案 0 :(得分:1)

如果您的用户仅使用现代浏览器(非常不可能),您可以使用本地存储:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML=localStorage.getItem("lastname"); 

否则学习AJAX。它允许从服务器异步中保存/读取数据。这意味着您不必更改页面,并且可以在每次选择更改时保存数据。


如果您想轻松一点,请使用框架。因为这是一个没有框架的ajax请求:

var xhr=new XMLHttpRequest(); // Initialize the Ajax request
xhr.open('get', 'send-ajax-data.php');
xhr.onreadystatechange=function(){     // Track the state changes of the request
    if(xhr.readyState === 4){ // Ready state 4 means the request is done
        if(xhr.status === 200){ // 200 is a successful return

        }
    }
}
xhr.send(null); // Send the request to send-ajax-data.php

这是一个带框架(jquery)的ajax请求:

$.get( "send-ajax-data.php", function( data ) {

});

答案 1 :(得分:0)

您可以使用上述答案,并使用ajax调用发送数据。

你可以save your data in xml file in client side

  var newXml = "text to be saved"; // your data is here (form the xml).

  //Sets the data in a hyperlink for download.
  $('#DownloadLink')
    .attr('href', 'data:text/xml;base64,' + btoa(newXml))
    .attr('download', 'autounattended.xml');

或者您也可以将数据保存在json中。

  //creates javascript object
 var sampledata  = {'PkId' : 123, 'Name':'sudhansu' };

  //Converts the object to json string.
  var dataTobeSaved = JSON.stringify(sampledata);

  then you can save this data to a file using the above method.

答案 2 :(得分:0)

无论你如何分割它,你都需要学习一些东西才能使它发挥作用。因此,我认为您可以通过一些参考资料和简单的解释来更好地为您提供您可能无法理解或无法实现的代码。

首先,您需要实施CGI (common gateway interface)。 CGI可以通过PerlPHPPythonJavaScript (with nodejs)来实施。还有其他语言可以使用,但这些是最常见的。

在服务器上设置CGI脚本后,客户端应用程序可以通过AJAX requestHTML Form submit向服务器提交数据。大多数人使用AJAX,但两种选择都有效。

从客户端发送数据并由CGI脚本处理后,您将希望能够与数据进行交互。 CRUD是与数据接口的首字母缩写,代表Create, Read, Update, Delete。虽然可以通过将数据存储在原始文本文件中来实现这一点,但通常认为这是一种不好的做法。因此,我建议您考虑使用某种类型的SQL数据库,MySQLPostgreSQLSQLite是一些相对容易实现的(SQLite是三个中最简单的一个) )。