Gestire un carrello persistente con Math, Date e JSON

Introduzione

Gli oggetti globali Math, Date e JSON sono disponibili in JavaScript senza dover importare librerie esterne. Usati insieme permettono di risolvere problemi molto comuni nelle applicazioni web.

In questo tutorial costruiremo un piccolo sistema per gestire un carrello della spesa. Il programma sarà in grado di:

• aggiungere prodotti al carrello;
• calcolare subtotale, sconto e costo di spedizione;
• generare un identificativo casuale per l’ordine;
• salvare il carrello in formato JSON;
• impostare una scadenza temporale per i dati salvati;
• ricaricare il carrello solo se non è scaduto.

In questo esempio useremo Math per i calcoli e la generazione di valori casuali, Date per gestire data e scadenza, e JSON per convertire oggetti JavaScript in stringhe e viceversa.

Codice completo

const carrello = [
  {
    id: 101,
    nome: "Tastiera meccanica",
    prezzo: 79.90,
    quantita: 1
  },
  {
    id: 102,
    nome: "Mouse wireless",
    prezzo: 34.50,
    quantita: 2
  },
  {
    id: 103,
    nome: "Tappetino XXL",
    prezzo: 19.99,
    quantita: 1
  }
];

// Calcola il subtotale degli articoli
function calcolaSubtotale(prodotti) {
  return prodotti.reduce((totale, prodotto) => {
    return totale + prodotto.prezzo * prodotto.quantita;
  }, 0);
}

// Applica uno sconto in base al valore del carrello
function calcolaSconto(subtotale) {
  if (subtotale >= 100) {
    return subtotale * 0.10; // 10%
  }

  if (subtotale >= 50) {
    return subtotale * 0.05; // 5%
  }

  return 0;
}

// Calcola la spedizione usando una soglia minima
function calcolaSpedizione(totaleDopoSconto) {
  return totaleDopoSconto >= 80 ? 0 : 6.90;
}

// Arrotonda un importo a due cifre decimali
function arrotondaImporto(importo) {
  return Math.round(importo * 100) / 100;
}

// Crea un codice ordine casuale
function generaCodiceOrdine() {
  const numeroCasuale = Math.floor(Math.random() * 900000) + 100000;
  return `ORD-${numeroCasuale}`;
}

// Costruisce il riepilogo economico dell´ordine
function creaRiepilogo(prodotti) {
  const subtotale = calcolaSubtotale(prodotti);
  const sconto = calcolaSconto(subtotale);
  const imponibile = subtotale - sconto;
  const spedizione = calcolaSpedizione(imponibile);
  const totale = imponibile + spedizione;

  return {
    subtotale: arrotondaImporto(subtotale),
    sconto: arrotondaImporto(sconto),
    spedizione: arrotondaImporto(spedizione),
    totale: arrotondaImporto(totale)
  };
}

// Crea un oggetto completo pronto per la serializzazione
function creaOrdine(prodotti) {
  const adesso = new Date();
  const scadenza = new Date(adesso);

  // Il carrello sarà valido per 24 ore
  scadenza.setHours(scadenza.getHours() + 24);

  return {
    codice: generaCodiceOrdine(),
    creatoIl: adesso.toISOString(),
    validoFinoA: scadenza.toISOString(),
    prodotti,
    riepilogo: creaRiepilogo(prodotti)
  };
}

// Converte l´ordine in una stringa JSON
function serializzaOrdine(ordine) {
  return JSON.stringify(ordine, null, 2);
}

// Ricostruisce l´oggetto e controlla la scadenza
function caricaOrdine(json) {
  const ordine = JSON.parse(json);
  const scadenza = new Date(ordine.validoFinoA);
  const adesso = new Date();

  if (scadenza.getTime() <= adesso.getTime()) {
    throw new Error("Il carrello è scaduto.");
  }

  return ordine;
}

const ordine = creaOrdine(carrello);
const datiSalvati = serializzaOrdine(ordine);

console.log("Dati JSON salvati:");
console.log(datiSalvati);

try {
  const ordineCaricato = caricaOrdine(datiSalvati);

  console.log("Ordine caricato correttamente:");
  console.log(ordineCaricato);

  console.log(
    `Totale da pagare: ${ordineCaricato.riepilogo.totale.toFixed(2)} euro`
  );
} catch (errore) {
  console.error(errore.message);
}

Spiegazione

Calcoli con Math

Il metodo Math.round() arrotonda un numero all’intero più vicino. Per ottenere due cifre decimali si usa una tecnica frequente:

Math.round(importo * 100) / 100

Per esempio, se l’importo è 12.345, il valore viene moltiplicato per 100, arrotondato e poi diviso nuovamente per 100. È importante ricordare che i numeri decimali JavaScript sono rappresentati in virgola mobile. Per sistemi finanziari molto rigorosi è preferibile lavorare con i centesimi come numeri interi oppure usare una libreria specifica.

Math.random() restituisce un numero compreso tra 0 incluso e 1 escluso. Nel codice viene combinato con Math.floor() per ottenere un numero intero di sei cifre. Questo codice è adatto a un identificativo dimostrativo, ma non a token di sicurezza o codici per autenticazione.

Date e scadenze

new Date() crea un oggetto contenente data e ora correnti. Il metodo toISOString() converte la data in un formato standard, facilmente trasportabile all’interno di JSON e API:

2026-08-26T14:30:00.000Z

La lettera Z indica il riferimento al tempo UTC. Per confrontare due date è utile usare getTime(), che restituisce il numero di millisecondi trascorsi dal primo gennaio 1970.

Serializzazione con JSON

JSON.stringify() trasforma un oggetto JavaScript in una stringa. Il secondo argomento, impostato a null, indica che non vogliamo applicare filtri alle proprietà. Il terzo argomento, 2, aggiunge indentazione rendendo il risultato leggibile.

JSON.parse() esegue l’operazione inversa: prende una stringa JSON e ricrea un oggetto JavaScript. Le date, però, non vengono ricostruite automaticamente come oggetti Date. Per questo nel codice trasformiamo manualmente validoFinoA con:

new Date(ordine.validoFinoA)

Best practice

• Non usare Math.random() per la sicurezza: per token sensibili utilizzare le API crittografiche del browser, come crypto.getRandomValues().
• Salvare le date in formato ISO: è un formato standard, ordinabile e comprensibile tra sistemi diversi.
• Controllare sempre JSON.parse(): una stringa danneggiata genera un’eccezione. In un’applicazione reale è opportuno usare try...catch.
• Non fidarsi dei prezzi ricevuti dal client: in un negozio reale il server deve ricalcolare prezzi, sconti e totale.
• Separare le responsabilità: le funzioni di calcolo, serializzazione e controllo della scadenza sono indipendenti e quindi più facili da testare.
• Gestire il denaro con attenzione: per importi importanti è spesso meglio usare interi rappresentanti i centesimi.

Riepilogo

In questo progetto abbiamo combinato tre oggetti globali fondamentali:

• Math per arrotondamenti, soglie e numeri casuali;
• Date per creare timestamp, calcolare scadenze e confrontare momenti temporali;
• JSON per salvare e ripristinare un ordine in un formato portabile.

La stessa struttura può essere estesa per salvare preferenze dell’utente, bozze di ordini, configurazioni temporanee o dati offline. La distinzione importante è tra l’oggetto JavaScript usato durante l’esecuzione e la stringa JSON utilizzata per trasferire o memorizzare i dati.

Approfondisci con risorse ufficiali

• MDN Math: documentazione dei metodi matematici disponibili in JavaScript.
• MDN Date: guida alla creazione, formattazione e manipolazione delle date.
• MDN JSON: riferimento per JSON.parse() e JSON.stringify().
• ECMAScript Language Specification: specifica ufficiale del linguaggio JavaScript.