Javascript Jquery：如何在客户端存储文本框值并显示？

单击按钮时，下面的代码将更新用户在文本框中输入的显示值，但在此代码中，它不会保留用户以前输入的值

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />    
<button id="Get">Submit</button> 
<div id="textDiv"></div> - 
<div id="dateDiv"></div>

现在我想保留用户输入的所有值，当用户提交按钮时，会同时显示上一个值和当前值

如何做到这一点

下面的代码将有助于保留所有值

var $input = $('#inputId');    
$input.data('persist', $input.val() );

---

如果是，当用户单击按钮时，如何显示所有值“上一个”、“当前”等？

如果我做对了，这就是您需要的

<h1>Type your comment below </h1>

<input id="txt_name" type="text" value="" />

<button id="Get">Submit</button> 

<script type="text/javascript">
    jQuery(function(){
    $("button").click(function() {
      var value = $("#txt_name").val(); 
      $("#section").prepend('<div class="textDiv">'+value+'</div>')
      $("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
      $("#txt_name").val('');
    });
});
</script>

<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>

在下面键入您的评论
提交
jQuery（函数（）{
$（“按钮”）。单击（函数（）{
var值=$（“#txt_name”）.val（）；
$（“#节”）。前缀（“”+value+“”）
$（“#节”）.prepend（“”+new Date（）.toString（）+“”）
$（“#txt_name”）.val（“”）；
});
});

如果我没弄错，这就是你需要的

<h1>Type your comment below </h1>

<input id="txt_name" type="text" value="" />

<button id="Get">Submit</button> 

<script type="text/javascript">
    jQuery(function(){
    $("button").click(function() {
      var value = $("#txt_name").val(); 
      $("#section").prepend('<div class="textDiv">'+value+'</div>')
      $("#section").prepend('<div class="dateDiv">'+new Date().toString()+'</div>')
      $("#txt_name").val('');
    });
});
</script>

<!-- each time you press submit, a new line will be pushed here -->
<div id="section">
</div>

在下面键入您的评论
提交
jQuery（函数（）{
$（“按钮”）。单击（函数（）{
var值=$（“#txt_name”）.val（）；
$（“#节”）。前缀（“”+value+“”）
$（“#节”）.prepend（“”+new Date（）.toString（）+“”）
$（“#txt_name”）.val（“”）；
});
});

如果只想显示用户提交的上一个和当前值并使用数据功能，则：

$("button").click(function() {
    var input = $("#txt_name").val(); 
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',input);
    $("#dateDiv").text(new Date().toString());
});

如果您想要所有的值并存储它们，那么我将创建一个数组。但是您可以始终连接字符串

var arr = [];
$("button").click(function() {
    var input = $("#txt_name").val();
    arr.push(input);
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',previous+input);
    $("#dateDiv").text(new Date().toString());
});

不使用

.data（）

可以执行以下操作：

 $("button").click(function() {
    var input = $("#txt_name").val(); 
    $("#textDiv").text($("#textDiv").text()+input);
    $("#dateDiv").text(new Date().toString());
});

---

如果只想显示用户提交的上一个值和当前值，并使用数据功能，则：

$("button").click(function() {
    var input = $("#txt_name").val(); 
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',input);
    $("#dateDiv").text(new Date().toString());
});

如果您想要所有的值并存储它们，那么我将创建一个数组。但是您可以始终连接字符串

var arr = [];
$("button").click(function() {
    var input = $("#txt_name").val();
    arr.push(input);
    var previous = $("#textDiv").data('previous') || '';
    $("#textDiv").text(previous+input);
    $("#textDiv").data('previous',previous+input);
    $("#dateDiv").text(new Date().toString());
});

不使用

.data（）

可以执行以下操作：

 $("button").click(function() {
    var input = $("#txt_name").val(); 
    $("#textDiv").text($("#textDiv").text()+input);
    $("#dateDiv").text(new Date().toString());
});

---

您可以使用单个div，而不是对message和date使用两个单独的div

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="msgDiv"></div>

$(document).ready(function() {
  var preservedTxt = '';
  $("button").click(function() {
       var input = $("#txt_name").val();
       var date = new Date().toString();
       var msg = input + ' - ' + date;

       preservedTxt = preservedTxt + '<br>' + msg;

       $('#msgDiv').html(preservedTxt);
   });
});

在下面键入您的评论
提交
$（文档）.ready（函数（）{
var preservedTxt=''；
$（“按钮”）。单击（函数（）{
变量输入=$（“#txt_name”）.val（）；
var date=新日期（）.toString（）；
var msg=输入+'-'+日期；
preservedText=preservedText+'
'+msg；
$（'#msgDiv'）.html（preservedText）；
});
});

---

jsidle:

您可以使用单个div，而不是对message和date使用两个单独的div

<h1>Type your comment below </h1>
<input id="txt_name" type="text" value="" />
<button id="Get">Submit</button>
<div id="msgDiv"></div>

$(document).ready(function() {
  var preservedTxt = '';
  $("button").click(function() {
       var input = $("#txt_name").val();
       var date = new Date().toString();
       var msg = input + ' - ' + date;

       preservedTxt = preservedTxt + '<br>' + msg;

       $('#msgDiv').html(preservedTxt);
   });
});

在下面键入您的评论
提交
$（文档）.ready（函数（）{
var preservedTxt=''；
$（“按钮”）。单击（函数（）{
变量输入=$（“#txt_name”）.val（）；
var date=新日期（）.toString（）；
var msg=输入+'-'+日期；
preservedText=preservedText+'
'+msg；
$（'#msgDiv'）.html（preservedText）；
});
});

---

jsiddle:

在数组中存储值会有所帮助

    jQuery(function(){
var name=[];
var time=[];
    $("button").click(function() {
        var value = $("#txt_name").val(); 
        name.push(value);
        $("#textDiv").text(name);
        time.push(new Date().toString())
        $("#dateDiv").text(time);

    });
});

---

将值存储在数组中会有所帮助

    jQuery(function(){
var name=[];
var time=[];
    $("button").click(function() {
        var value = $("#txt_name").val(); 
        name.push(value);
        $("#textDiv").text(name);
        time.push(new Date().toString())
        $("#dateDiv").text(time);

    });
});

---

---

为此，可以使用：var old_value=$（'#textDiv'）.text（）；var inputVal=$（'#inputId'）.val（）；var fullData=旧值+“”+输入值$（#textDiv”）.text（完整数据）@Yogeshhakya让我告诉你，我需要这样的东西，可以在Java中通过List、ArrayList的帮助获得。就像用户在tetbox中输入任何东西一样，当按submit按钮时，将该值添加到List/ArrayList中，并在该列表的帮助下显示日期。你为什么要这样做。它只会显示给他们知道。刷新后，它将运行。您只需使用以下命令：var ArrayList=[]$（“按钮”）。单击（函数（）{var value=$（“#txt_name”）.val（）；var data={date:new date（）.toString（），text:value}；ArrayList.push（data）；}）@KajaMydeen现在同意你的观点，我不能使用db，所以这是我的一项附加工作，你可以使用：var old_value=$（'#textDiv'）.text（）；var inputVal=$（'#inputId'）.val（）；var fullData=旧值+“”+输入值$（#textDiv”）.text（完整数据）@Yogeshhakya让我告诉你，我需要这样的东西，可以在Java中通过List、ArrayList的帮助获得。就像用户在tetbox中输入任何东西一样，当按submit按钮时，将该值添加到List/ArrayList中，并在该列表的帮助下显示日期。你为什么要这样做。它只会显示给他们知道。刷新后，它将运行。您只需使用以下命令：var ArrayList=[]$（“按钮”）。单击（函数（）{var value=$（“#txt_name”）.val（）；var data={date:new date（）.toString（），text:value}；ArrayList.push（data）；}）@KajaMydeen同意你现在我不能用db所以这是我的工作是的这就是我要找的，我们能不能得到这个

.data（）

我把它丢在这里了，你是说巫婆数据？或者在哪里？是的，这就是我要找的，我们能不能得到这个

.data（）

我把它丢在这里了，你是说巫婆数据？或者在哪里？如果我需要所有输入值，它将只显示上一个和当前的值。您可以始终将值存储在数组@SubodhJoshi，我编辑了我的awnser。如果我需要所有输入值，它将只显示上一个和当前的值。您可以始终将值存储在数组@SubodhJoshi，我编辑了我的awnser。