如何在控制台中保留消息？ （JS功能）

Question

我有一个JavaScript函数，可以使用Caesar Cipher加密文本。

我还有一个HTML表单，它将数据发送到PHP，PHP使用echo将其打印到div个元素中，然后，当我按下另一个button时（不输入） ，它调用“Caesar Cipher”函数（使用DOM接收div s的值）。

问题在于，当函数完成其工作时，它使用console.log将其打印到控制台中 - 但是当它打印时，它只会持续半秒钟，之后消息消失。

我认为它与页面重新加载或某事有关，所以如果你能解释我该怎么做来解决它，为什么 - 我非常感谢你！

HTML＆amp; PHP：

<form style="display: inline-block" method="get" action="index.php">
    <fieldset>
        <legend>Caesar Cipher</legend>
        <input type="text" name="text">
        <input type="number" name="shift">
        <input type="submit" name="submit">
        <button onclick="caesarCipher(1)">Encrypt</button> 
            //the value 1 means that the function will encrypt, and not decrypt
    </fieldset>
</form>

<div id="text">
    <?php
        if(isset($_GET["submit"])) { //when the submit (input) button is pressed
            $text = $_GET["text"];
            echo htmlspecialchars($text);
                //set div (id="text") innerHTML (DOM) the value of the input field
        }
    ?>
</div>

JavaScript的：

function caesarCipher(dir) {
    //the function takes a text, enters every letter into an array,
    //and then shifts it using the letters array (with their index)
    //it logs the array (array.join("")) into the console - here is the problem

    text = document.getElementById("text").innerHTML.trim().toLowerCase();
    shift = 3;
    var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
    var charArray = [];
    for(var i = 0; i < text.length; i++) {
        var letter = text.charAt(i);
        if(letter == " ")
            letter = " ";
        else {
            var index = letters.indexOf(letter);
            if(dir > 0)
                index = (index + shift) % 26;
            else {
                index -= shift;
                if(index < 0)
                    index += 26;
            }
        letter = letters[index];
        }
        charArray[i] = letter;
    }
    console.log(charArray.join(""));
}

Answer 1

在Google Chrome浏览器中，您可以按F12或Ctrl+Shift+J键以显示图片中的侧边栏，然后选中Preserve Log复选框以保留日志消息。

其他浏览器也存在类似选项。

Answer 2

勾选保留日志复选框。

此外，

<!-- This is how you comment in HTML -->

Answer 3

为什么不使用localStorage.setItem('encString', charArray.join("")); // whenever you want to see it, even after a window reload console.log( localStorage.getItem('encString') ); ？

{{1}}