Question

刷新页面后，我在保留不同的值方面遇到了一些困难。我在github上找到了一个旧代码，我想修改它以使其更好。在实践中，程序会创建一个购物清单，我可以在其中突出显示（如果已购买）或删除插入的产品，但每次刷新页面时输入的值都会消失。

这是该计划：

$(document).ready(function() {

var leftbutton = '<img class="check" src="image/approve.png" alt="check" title="click to mark purchase" width="30px">'
var rightbutton = '<img class="close" src="image/close.png" alt="close" title="click to remove item" width="30px>">'

$('.textinput').keydown(function(a) {
    if (a.keyCode == 13) {
        $('.list').prepend('<div class="result">' + leftbutton + '<p>' + $('.add-items').val() + '</p>' + rightbutton + '</div>');
    $('input.add-items').val("");
    }
})

 $('.list').on('click', '.check', function() {
    if ($(this).closest('.list > div').hasClass('result')) {
        $(this).closest('.list > div').addClass( 'result-remove' );
        $(this).closest('.list > div').removeClass( 'result' );

    }   
    else {
        $(this).closest('.list > div').removeClass( 'result-remove' );
        $(this).closest('.list > div').addClass( 'result' );
    }
    });

  $('.list').on('click', '.close', function() {
        $(this).closest('.list > div').fadeOut("fast")

    });
});

Answer 1

您可以使用会话变量，如：

sessionStorage.setItem("variableName", variableValue);

并通过调用以下方式检索它们：

sessionStorage.getItem("variableName");

从逻辑上讲，在输入的密钥启动事件和页面上设置会话变量值加载获取会话值并将其打印在其中。我确信您可以以相同的方式将字符串化对象存储在变量中，并通过解析来检索它们。

让我知道它是否有帮助：）

Answer 2

一种方法是使用localStorage.getItem和localStorage.setItem创建一个保存的变量;

<input id="saveField" placeholder="0" type="number"></input>
<button onclick="load()">load</button>
<button onclick="save()">save</button>
<script>
var saveValue;
function load(){
saveValue = localStorage.getItem("saveValue");
document.getElementById("saveField").value = saveValue;
};
function save(){
saveValue = document.getElementById("saveField").value;
localStorage.setItem("saveValue", saveValue);
};</script>

javascript - 如何在页面刷新后保留输入数据

2 个答案: