Локальное хранилище предотвращает перезагрузку страницы

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(); 
});