将数据保存到本地存储并显示为 innerHTML答案

【问题标题】：Save data to localstorage and display it as innerHTML将数据保存到本地存储并显示为 innerHTML
【发布时间】：2018-01-03 19:24:38
【问题描述】：

我已经使用这些代码制作了一个简单的笔记应用程序。它必须通过按记住按钮将文本框值存储到 localStorage 中。然后显示它，但按另一个按钮。但它不起作用。

<HTML>

<head>
    <script>
        function myfunction1() { //remember code var
            texttosave = document.getElementById('textline').innerHTML;
            localStorage.setItem('mynumber', texttosave);
        }

        function
        myfunction2() { //recall code
            document.getElementById('recalledtext').innerHTML =
                localStorage.getItem('mynumber');
        }
    </script>
</head>

<body>
    <input type="text" id="textline" />
    <button id="rememberer" onclick='myfunction1()'>remember text</button>
    <button id="recaller" onclick='myfunction2()'>recall text </button>
    <p id="recalledtext">Loading</p>
</body>

</HTML>

【问题讨论】：

你的控制台有错误吗？
有同样的问题。但他们的答案对我不起作用。
@sheplu 我是网络脚本的新手。你在说什么控制台？
我刚刚将代码发布到“test.html”文件中并通过localhost打开。
我还需要做其他事情吗？

标签： javascript html stack-overflow angular2-localstorage

【解决方案1】：

当您输入文本时，<input> 元素的 .innerHTML 属性不会改变。要查看当前输入到输入框中的内容，必须使用其.value 属性。

这样

texttosave = document.getElementById('textline').innerHTML ;

需要成为

texttosave = document.getElementById('textline').value ;

应该这样做。

您稍后还链接到您的测试网站。那里的代码

function myfunction1(){ //remember code texttosave = ..........

但这使得texttosave = .......... 成为评论的一部分。你需要写

function myfunction1(){ //remember code
    texttosave = ..........

现在您已将 texttosave = ...... 放在单独的一行，因此它不被视为评论的一部分。

或者，如果您不想插入换行符以保持代码简洁，请删除 cmets（//remember code、//recall code），然后您可以将它们保留在同一行。

另一种选择是将单行 cmets（例如 // remember code）替换为您在同一行上关闭的多行注释（即 /* remember code */）

【讨论】：