javascript - 不使用变量在 HTML 页面上保存信息

Question

所以我正在尝试创建一个网页，用户可以在其中输入课程信息。页面上有一个添加按钮，如果他们需要更多字段，可以为他们添加另一个文本字段。

按下添加按钮后，页面将重置，之前输入的所有信息都将消失。我可以将信息保存在一个数组中，并在按下添加按钮时将信息保存到数组中，然后使用存储在数组中的内容重新填充字段。

我的问题是：有没有办法刷新页面，并将信息保留在文本字段中，而不需要上面提到的漫长过程，是否有一些我可以使用的属性不会删除以前输入的信息？

Answer 1

如果您编写 HTML5 代码，则可以使用localStorage并回退到 cookie。此外，如果在会话结束后应该删除信息，那么您可以改用 sessionStorage。

Answer 2

假设这个 HTML：

<form id="course-info-form" action="submit-course-info.php" method="post">
    Professor name: <input type="text" name="professor"><br>
    Additional info:<br>
    <input type="text" name="additional0"><br>
    <input type="submit" value="Submit">
</form>
<br>
<button id="add-button">Add Field</button>

<!-- Use jQuery for DOM manipulation -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用 JavaScript / jQuery：

var courseInfoForm = $('#course-info-form');
var addButton = $('#add-button');

// Keep track of how many fields there are, so each can have a unique "name" attribute
var additionalFieldsAdded = 1;

// Whenever "Add Field" is clicked, create another input field
addButton.on('click', function() {
    var newInput = $("<input>", {
        type: "text"
        name: "additional" + additionalFieldsAdded
    });
    courseInfoForm.append(newInput, "<br>");
    additionalFieldsAdded += 1;
});

我不是很擅长 PHP。在您的 PHP 脚本中，创建一个 while 循环来检查 if isset($_POST['additional0'])、addition1、addition2 等，直到您确定没有更多其他字段通过。然后将所有这些额外的细节存储到一个数组中，并按照你认为合适的方式处理它。

至于您最初的问题，我建议改用我的解决方案。如果您所做的只是每次都添加一个新表单，那么最好避免不必要地重新加载页面。

我想您可以在单击“添加字段”按钮时捕获“暂时提交”的信息，然后在您的 PHP 脚本中循环遍历所有其他字段并在每次添加另一个字段时再创建 1 个输入元素，并且将每个“旧”输入元素的 value 属性设置为“暂时提交”的任何内容。

因此，要回答您的问题，您可以使用以下命令设置输入字段（服务器端）的默认值：

// add-course-information.php
<?php
    $addingField = false;

    // Check for the optional "?do=addfield" parameter
    if (isset($_POST['do']) && $_POST['do'] == 'addfield') {
       $addingField = true;
       $fields = array();
       $nextField = 'additional' . count($fields);

       // Get each piece of POSTed field data
       while (isset($_POST[$nextField]) && $_POST[$nextField] != '') {
           array_push($fields, $_POST[$nextField]);
           $nextField = 'additional' . count($fields);
       }
    }
?>

<!-- Silly HTML! -->

<?php
    // If adding a field, recreate and repopulate all previous fields
    if ($addingField) {
        for ($i = 0; i < count($fields); i++) { ?>
            <input type="text" name="additional<?= $i ?>" value="<?= $fields[$i] ?>">
<?php   } ?>
        <input type="text" name="additional<?php echo count($fields) + 1 ?>">
<?php }
    // Otherwise, show the default additional field
    else { ?>
        <input type="text" name="additional0">
<?php } ?>

<!-- More awesome HTML! -->

这可能有效......（目前未经测试。）

该页面应该做什么（如果有效）是：

1. 默认情况下，给用户他的初始设置，只有 1 个额外的输入字段，“additional0”。
2. 当用户点击“添加字段”时，?do=addfield应该是 POST 到 add-course-information.php（你可以写那部分），当这个页面接收到 do=addfield 参数时，它就知道循环遍历所有提交的附加字段，并将它们分别存储到一个数组中，然后将所有提交的数据输出回另一个循环的动态生成<input>元素。

但我认为那会复杂得多，并且不必要地增加服务器必须执行的处理。如果有人每分钟敲击“添加字段”按钮数十万次，甚至可能被滥用，最终使您的 for 循环迭代数百万次......（除非您对最大字段数施加限制，这很容易。）

但是，如果可用，您不妨利用客户端的处理能力。

Answer 3

我认为您可以使用 ajax...它在后台运行，没有完成页面重新加载。