本地存储防止页面重新加载

Question

我想在单击表单的保存按钮时添加一行，它发生了，但随后页面自行刷新（为什么？）并且新行消失了。如何预防？

<button id="saveBtn">Save</button>

$("#saveBtn").click(function(){
    add();
});

function add() {
    var book = {};
    $('form [name]').each(function(){
        book[this.name] = this.value;
    });
    bookList.push(book);
    console.log(bookList);
    localStorage.setItem('bookList', JSON.stringify(bookList));
    showBooks();

}

function showBooks(){
    for (var i=0; i < bookList.length; i++){
        $("#tblData tbody").append("<tr>"+
                                     "  <td>"+bookList[i].author+"</td>" +
                                     "  <td>"+bookList[i].title+"</td>" +
                                     "</tr>");
        }
}

Answer 1

像这样更改您的按钮事件。当点击执行时，回发也会执行。通过调用 event.preventDefault() 你可以阻止这个回传

$("#saveBtn").click(function(event){
event.preventDefault();
    add();
});

本地存储防止页面重新加载

local storage prevent page reload

jquery

local-storage