[<juniorJS>]

Здраствуйте, ребята помогите разобратса, не понимаю в чем проблема, что именно я не так делаю. Это код по идее должен был сохранять информацыю в параграфе, после того как закрить вкладку оибо же сам браузер, но он сохраняет только в самом браузере, а в хтмл инфа не выводитса и не запоминаетса.

в разметке есть три инпута, 2 текстовых поля, и 1 кнопочка(сохранить даные) , ну и соответственно параграф куда их нужно сохранить. Прошу не судить строго, я относительно недавнго начал изучать джс, щас именно хочу освоить localStorage, вроде за него все прочел, но не пойму че не так тут ((

$(document).ready(function(){
$('#click').click(function(){

var name = $('#name').val();
var surname = $('#surname').val(); // передаю данные

localStorage.setItem('name', name);
localStorage.setItem('surname',surname);
if(localStorage.getItem('surname')){ //проверка
$('.p').append(localStorage.getItem('surname'));
}else{};
});
});