如何在javascript中存储从文本框输入后的字符串值

在JavaScript中，可以通过多种方式存储从文本框（input element）输入后的字符串值。以下是一些常见的方法：

基础概念

DOM操作：文档对象模型（DOM）允许JavaScript与HTML元素进行交互。
事件监听：通过监听特定事件（如点击按钮），可以在事件触发时执行相应的函数。

类型与应用场景

局部变量：适用于简单的临时存储。
全局变量：适用于需要在多个函数间共享的数据。
本地存储（localStorage/sessionStorage）：适用于需要在页面刷新后仍保留的数据。

示例代码

方法一：使用局部变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Store Input Value</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="storeValue()">Store Value</button>

    <script>
        function storeValue() {
            var inputValue = document.getElementById('myInput').value;
            console.log(inputValue); // 这里可以对inputValue进行进一步处理
        }
    </script>
</body>
</html>

方法二：使用全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Store Input Value</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="storeValue()">Store Value</button>

    <script>
        var globalInputValue;

        function storeValue() {
            globalInputValue = document.getElementById('myInput').value;
            console.log(globalInputValue);
        }
    </script>
</body>
</html>

方法三：使用本地存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Store Input Value</title>
</head>
<body>
    <input type="text" id="myInput">
    <button onclick="storeValue()">Store Value</button>

    <script>
        function storeValue() {
            var inputValue = document.getElementById('myInput').value;
            localStorage.setItem('userInput', inputValue);
            console.log(localStorage.getItem('userInput'));
        }
    </script>
</body>
</html>