Сохранение поля ввода с помощью jQuery

Question

У меня есть поле ввода с одним текстовым вводом и двумя кнопками. Я хочу, чтобы пользователь напечатал что-то в поле, а затем нажмите «Сохранить». Если он обновляет страницу, вход должен быть пустым, если он не нажмет вторую кнопку «Восстановить», которая должна автоматически заполнить вход.

Мне удалось сохранить ввод в переменной, а затем добавить его на вход. Моя проблема в том, что вход сохраняется как объект и отображается как объект ... вместо строки. Вот мой код:

var artist; 

$(document).ready(function(){ 
     $(".save").click(function(){ 
      artist = $("#artist").val(); 
     }); 

     $(".reset").click(function(artist){ 
      $('#artist').val(artist); 
     }); 
    }); 

Answer 1

$("#Save").click(function() { 
    var text = $("#text").val(); 
    localStorage.setItem('text', text); 


}); 

$("#Restore").click(function() { 
    var text = localStorage.getItem('text'); 
    console.log(text) 
    $("#text").val(text); 
}); 

DEMO

Вы должны использовать место для хранения значения текста. При обновлении страницы вы можете получить его снова. Местное хранилище - хорошее место для хранения. Демонстрация покажет, как

Answer 2

Я не использовал его раньше, но если вы хотите, чтобы сделать все это в JavaScript/JQuery, то есть библиотека для обработки печенье https://github.com/js-cookie/js-cookie. Альтернативой является использование вашей серверной части для установки файла cookie.