如何通过文本输入将数据添加到 localStorage 并通过另一个文本输入调用它？答案

【问题标题】：How to I add data to localStorage through a text input and recall it through another text input?如何通过文本输入将数据添加到 localStorage 并通过另一个文本输入调用它？
【发布时间】：2019-12-22 12:22:35
【问题描述】：

我正在尝试使用 html 和 JavaScript 制作应用程序，以便我可以通过文本输入提交数据并稍后通过另一个文本输入调用它。这个应用程序的想法是提交我在中文课中已经使用过的单词，然后，当我准备另一节课时，能够通过这个应用程序搜索我以前是否使用过特定的单词。

我在下面留下了我的代码。我知道这可能是一个非常基本的事情，但我试图研究它，但没有找到足够具体的东西：

<!DOCTYPE html>
<html>
<body>
    <form>
<input type="text" id="textbox2" placeholder="Submit here" required>
    </form>
    <form>
<input type="text" id="textbox1" placeholder="Search here" required>
    </form>
    <script type="text/javascript">
    </script>
    </body>
</html>

【问题讨论】：

这能回答你的问题吗？ Save input data to localStorage on button click

标签： javascript

【解决方案1】：

当然，您需要在适当的时候调用函数，但这很简单。

<!DOCTYPE html>
<html>
    <body>
        <form>
            <input type="text" id="textbox1" placeholder="Submit here" required>
            <button onclick="event.preventDefault();saveFirstInput();">Save submission input</button>
       </form>
        <form>
            <input type="text" id="textbox2" placeholder="Search here" required>
            <button onclick="event.preventDefault();populateSecondInput();">Recall submission input</button>
        </form>

        <script type="text/javascript">
            function saveFirstInput(){
                window.localStorage.setItem("firstInputValue", document.getElementById("textbox1").value);
                document.getElementById("textbox1").value = "";
            }

            function populateSecondInput(){
                var savedValue = window.localStorage.getItem("firstInputValue") || "";
                document.getElementById("textbox2").value = savedValue;
            }
        </script>
    </body>
</html>

【讨论】：

谢谢，我试过这段代码，但它不起作用。如果我尝试使用“在此处搜索”输入来搜索我通过“在此处提交”输入中提交的单词，它不会执行任何操作。
你调用函数了吗？我更新了我的代码以向您展示如何。

【解决方案2】：

我猜您缺少应用程序开发的基本概念 - 从架构的角度来看，您将需要某种数据库来连接和发送您的信息。

我个人认为，Angular 是一个很棒的框架，有很棒的文档和很棒的教程 - 在这里查看：https://angular.io/docs

如果您不熟悉 javascript 和 html，我建议您先阅读以下教程： https://www.w3schools.com/js/

在您设法解决了一些基本问题后，我认为您应该使用 firebase 来获得一些无服务器的后端功能，例如数据库访问。 Angular 与 firebase 配合得很好！

http://firebase.google.com/

https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md

如果您仍然想使用本地存储，请看这里： https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

【讨论】：

是的，我还有很多东西要学。感谢您提供所有材料！
“您将需要某种数据库” 一点也不真实。并非每个应用程序都必须扩展到每分钟 10 000 个用户或支持数十种不同的设备。有时，应用程序可以很小并针对较小的用户群，因此占用空间较小。无需为 OP 只会使用自己的应用程序包含千字节的 JavaScript。学习驾驶简单的汽车，而不是手动双离合 18 轮车。
嗯，你是完全正确的，当你说：学习驾驶一辆简单的汽车，而不是一辆卡车，事实上，当使用角度时，你会在尺寸方面有很大的开销。但即使是简单的应用程序，也可以而且经常应该可以访问数据库——无论用户或服务的数量如何——这种比较是有缺陷的。此外，这是一个直接学习一些东西的好机会。无论如何，根据我对初学者的经验，他们在学习 Angular 而不是普通的 javascript 时通常会更有趣，因为在很短的时间内完成伟大的事情要容易得多。