如何保存来自框 html 的输入 - Javascript

在网页开发中，我们经常需要获取用户在输入框中输入的内容，并将其保存到数据库中或在网页上显示出来。本文将介绍如何使用Javascript保存来自框HTML的输入。

获取输入框的值

我们可以使用Javascript中的document.getElementById()方法来获取输入框元素的值。

// 获取输入框元素
var inputBox = document.getElementById("input-box");

// 获取输入框的值
var inputValue = inputBox.value;

在上面的代码中，我们首先通过document.getElementById()方法获取输入框元素，然后使用value属性来获取输入框的值。

注意：在获取输入框的值时，我们应该确保输入框已经被加载到网页中。

保存输入框的值

一般情况下，我们会将输入框的值保存到服务器或本地存储中。这里我们以本地存储为例，使用localStorage对象来保存输入框的值。

// 获取输入框元素
var inputBox = document.getElementById("input-box");

// 获取输入框的值
var inputValue = inputBox.value;

// 将输入框的值保存到本地存储中
localStorage.setItem("inputValue", inputValue);

在上面的代码中，我们使用localStorage.setItem()方法将输入框的值保存到本地存储中。第一个参数是键，第二个参数是值。

显示保存的值

接下来，我们可以使用localStorage对象来获取保存的值，并在页面中显示出来。

// 获取保存的值
var savedValue = localStorage.getItem("inputValue");

// 在页面中显示值
document.getElementById("output-box").innerHTML = savedValue;

在上面的代码中，我们使用localStorage.getItem()方法获取保存的值。然后，我们将值赋值给一个元素的innerHTML属性，以在页面中显示出来。

结论

以上就是使用Javascript保存来自框HTML的输入的方法。我们可以使用document.getElementById()获取输入框元素，使用value属性获取输入框的值，使用localStorage.setItem()保存输入框的值，使用localStorage.getItem()获取保存的值，然后将其显示在页面中。

// 获取输入框元素
var inputBox = document.getElementById("input-box");

// 获取输入框的值
var inputValue = inputBox.value;

// 将输入框的值保存到本地存储中
localStorage.setItem("inputValue", inputValue);

// 获取保存的值
var savedValue = localStorage.getItem("inputValue");

// 在页面中显示值
document.getElementById("output-box").innerHTML = savedValue;