[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;