JavaScript: monitorare le modifiche di un profilo utente con il web storage

In JavaScript possiamo monitorare le modifiche degli utenti ai loro profili con il web storage.

Quando un utente effettua una modifica al suo profilo, possiamo registrare la data di tale modifica usando il web storage. Dobbiamo solo verificare che il salvataggio dei dati del suo profilo sia andato a buon fine. L'invio del form del profilo avviene tramite le Fetch API incapsulate all'interno di una funzione che restituisce una Promise.

'use strict';

const request = (url, data) => {
    return new Promise((resolve, reject) => {

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        }).then(response => {
            if(response.ok) {
                resolve(response.json());
            } else {
                reject({
                   error: 500
                });
            }
        });

    });
};

const getLastUpdate = () => {
    if(localStorage.getItem('last-update') !== null) {
        return parseInt(localStorage.getItem('last-update'), 10);
    }
    return 0;
};

const setLastUpdate = () => {
    localStorage.setItem('last-update', Date.now());
};

const displayLastUpdate = (element, timestamp) => {
    if(!element || !timestamp) {
        return;
    }
    if(timestamp > 0) {
        let date = new Date(timestamp);
        let displayedDate = date.toLocaleDateString();

        element.innerText = `Last update: ${displayedDate}`;
    } else {
        element.style.display = 'none';
    }
};

document.addEventListener('DOMContentLoaded', () => {
    displayLastUpdate(document.querySelector('#last-update'), getLastUpdate());

    document.querySelector('#profile-form').addEventListener('submit', e => {
        e.preventDefault();
        let form = this;
        let data = {
            email: form.querySelector('#email').value,
            password: form.querySelector('#password').value,
            id: form.querySelector('#id').value
        };

        request('/api/profile/', data).then(resp => {
            if(resp.updated) {
                setLastUpdate();
            }
        }).catch(err => {
            console.log(err);
        });
    }, false);
});