[Javascript] Web APIs: Persisting browser data with window.localStorage

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;