我使用jquery创建输入字段，刷新页面后如何保持此“新输入值”存在

Question

我使用jquery创建输入字段，如何在刷新页面后保持此“新输入值”存在

该代码是

function onMyButtonclick() 
        {   var a =$('#addItem').val()
            $('#resultList').append('<li>'+a +'</li>');
            $('#addItem').val("");

        }
<input type="button"  value="add" onClick="onMyButtonclick();">
<ol id="resultList">
    <li>just example</li>
</ol>
</form>

解决方案是如此重要..

Answer 1

您必须了解，在页面刷新时，将再次重构DOM，因此没有直接的方法让页面刷新后存在此“新输入值”，因为它是在用户交互时以编程方式添加到DOM的。

但是，尽管如此，您仍然可以在浏览器中使用其他机制来持久保存信息，即使刷新页面也是如此。 您具有cookie以及其他与存储相关的功能集，其中包括localStorage，sessionStorage和globalStorage。 您可以在DOM存储指南中阅读有关这些功能的信息。 对于您的情况，LocalStorage最合适。

因此，基本上，您需要的解决方案是修改onMyButtonClick函数以存储有关在上述任何浏览器持久性机制中添加的输入项的信息。 当页面在刷新时再次加载时，您将编写一个新函数，该函数将使用您存储的信息来再次生成输入元素。

我还建议您阅读以下文章： Web应用程序的本地存储的过去，现在和未来

Answer 2

使用本地存储

var data = JSON.parse(localStorage.getItem('a')) || [];
//do something with data array
data.push($('#addItem').val());
localStorage.setItem('a', JSON.stringify(data));