Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using
window.localStorage
to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.feedback.js
import inputStorage from '../input-storage/input-storage'; let feedback = { init() { inputStorage.restore('userFeedback', '.feedback__textarea'); inputStorage.save('userFeedback', '.feedback__textarea'); } }; export default feedback;
inputStorage.js
let inputStorage = { restore(key, inputSelector) { if(localStorage[key]) { document.querySelector(inputSelector).value = localStorage[key]; } }, save(key, inputSelector) { let inputElement = document.querySelector(inputSelector); inputElement.addEventListener('input', () => { localStorage[key] = inputElement.value; }); } }; export default inputStorage;