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

我有一个JavaScript函数，它使用Caesar密码对文本进行加密

我还有一个HTML表单，它向PHP发送数据，PHP使用echo将数据打印到div元素中，然后，当我按下另一个按钮not input时，它调用Caesar Cipher函数，该函数通过DOM接收div的值

问题是，当函数执行其任务时，它使用console.log将其打印到控制台中，但当它打印时，它只执行半秒钟，然后消息消失

我认为这与页面重新加载或其他有关，因此，如果您能解释一下如何修复它，以及为什么-我将非常感谢您

HTML和PHP：

JavaScript:

---

勾选保留日志复选框

而且

---

在Google Chrome中，您可以按F12或Ctrl+Shift+J键以显示如图所示的侧栏，并选中保留日志复选框以保留日志消息

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

为什么不使用本地存储

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

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(""));
}

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

localStorage.setItem('encString', charArray.join(""));
// whenever you want to see it, even after a window reload
console.log( localStorage.getItem('encString') );