将数据保存到localstorage并显示为innerHTML

Question

我已经使用这些代码制作了一个简单的笔记应用程序。它必须通过按下记住按钮将文本框值存储到 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>

Answer 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 = ...... 放在单独的行中，因此它不被视为评论的一部分。

或者，如果您不想插入换行符以保持代码简洁，请删除注释 (//remember code, //recall code) 然后您可以将它们放在同一行.

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

将数据保存到localstorage并显示为innerHTML

Save data to localstorage and display it as innerHTML

html

javascript

stack-overflow

angular2-localstorage