{"id":164049,"date":"2025-04-29T09:00:00","date_gmt":"2025-04-29T07:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/web-storage-localstorage-sessionstorage-html5\/"},"modified":"2025-04-29T09:00:00","modified_gmt":"2025-04-29T07:00:00","slug":"web-storage-localstorage-sessionstorage-html5","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/web-storage-localstorage-sessionstorage-html5\/","title":{"rendered":"Web Storage: localStorage e sessionStorage in HTML5"},"content":{"rendered":"<p style=\"text-align: justify;\">La <strong>Web Storage API<\/strong>, introdotta con HTML5, ha rivoluzionato il modo in cui le applicazioni web possono memorizzare dati sul browser dell&#8217;utente. Prima della sua introduzione, l&#8217;unico meccanismo disponibile erano i cookie, con le loro limitazioni di dimensione (circa 4KB) e il sovraccarico di rete causato dall&#8217;invio automatico ad ogni richiesta HTTP. localStorage e sessionStorage offrono una soluzione moderna, pi\u00f9 capiente e pi\u00f9 efficiente per l&#8217;archiviazione lato client.<\/p>\n<h2>localStorage vs sessionStorage: Le Differenze Fondamentali<\/h2>\n<p style=\"text-align: justify;\">La Web Storage API fornisce due meccanismi di archiviazione che condividono la stessa interfaccia ma differiscono significativamente nel comportamento di persistenza. Comprendere queste differenze \u00e8 fondamentale per scegliere il meccanismo appropriato per ogni caso d&#8217;uso.<\/p>\n<p style=\"text-align: justify;\"><strong>localStorage<\/strong> memorizza i dati senza scadenza temporale. I dati persistono anche dopo la chiusura del browser e il riavvio del computer, rimanendo disponibili indefinitamente fino a quando non vengono esplicitamente cancellati dal codice JavaScript, dall&#8217;utente attraverso le impostazioni del browser, o dal browser stesso in caso di necessit\u00e0 di liberare spazio (cosa che avviene raramente).<\/p>\n<p style=\"text-align: justify;\"><strong>sessionStorage<\/strong> memorizza i dati solo per la durata della sessione della scheda del browser. Quando l&#8217;utente chiude la scheda (non il browser, ma la specifica scheda), i dati vengono eliminati. Ogni scheda ha il proprio spazio sessionStorage indipendente, anche se puntano allo stesso sito web. Questo isolamento rende sessionStorage ideale per dati temporanei che non devono essere condivisi tra schede diverse.<\/p>\n<p style=\"text-align: justify;\">Entrambi i meccanismi sono vincolati alla <strong>same-origin policy<\/strong>: i dati sono accessibili solo da pagine con lo stesso protocollo, dominio e porta. Questo significa che https:\/\/example.com e http:\/\/example.com hanno spazi di storage separati, cos\u00ec come example.com e sub.example.com.<\/p>\n<h2>Confronto con i Cookie<\/h2>\n<p style=\"text-align: justify;\">Per comprendere appieno il valore della Web Storage API, \u00e8 utile confrontarla con i <strong>cookie<\/strong>, il meccanismo di storage pi\u00f9 antico del web:<\/p>\n<ul>\n<li><strong>Capacit\u00e0<\/strong>: i cookie sono limitati a circa 4KB per dominio, mentre Web Storage offre tipicamente 5-10MB per origine<\/li>\n<li><strong>Traffico di rete<\/strong>: i cookie vengono inviati automaticamente con ogni richiesta HTTP al server, aumentando il traffico; Web Storage \u00e8 puramente lato client e non viene mai inviato automaticamente<\/li>\n<li><strong>Scadenza<\/strong>: i cookie possono avere una data di scadenza configurabile; localStorage non scade, sessionStorage dura quanto la scheda<\/li>\n<li><strong>Accesso server<\/strong>: i cookie sono accessibili sia dal client che dal server; Web Storage \u00e8 accessibile solo tramite JavaScript lato client<\/li>\n<li><strong>API<\/strong>: i cookie hanno un&#8217;API primitiva basata su stringhe; Web Storage offre un&#8217;API moderna e intuitiva<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">In generale, Web Storage \u00e8 preferibile per dati che non devono essere inviati al server, come preferenze dell&#8217;interfaccia utente, dati di form temporanei e stato dell&#8217;applicazione. I cookie rimangono necessari per l&#8217;autenticazione basata su sessioni, il tracciamento e qualsiasi dato che il server deve leggere ad ogni richiesta.<\/p>\n<h2>Metodi dell&#8217;API: setItem, getItem, removeItem e clear<\/h2>\n<p style=\"text-align: justify;\">L&#8217;interfaccia di Web Storage \u00e8 elegante nella sua semplicit\u00e0. Entrambi gli oggetti localStorage e sessionStorage espongono gli stessi quattro metodi principali, oltre a una propriet\u00e0 length e un metodo key().<\/p>\n<p style=\"text-align: justify;\">Il metodo <strong>setItem(chiave, valore)<\/strong> memorizza un dato associandolo a una chiave. Sia la chiave che il valore devono essere stringhe; se si passa un valore non stringa, viene automaticamente convertito tramite toString(). Questo \u00e8 un punto cruciale: oggetti e array non vengono serializzati automaticamente e devono essere convertiti manualmente con JSON.stringify().<\/p>\n<p style=\"text-align: justify;\">Il metodo <strong>getItem(chiave)<\/strong> restituisce il valore associato alla chiave specificata, o null se la chiave non esiste. Per i dati serializzati con JSON.stringify(), \u00e8 necessario utilizzare JSON.parse() per ricostruire l&#8217;oggetto originale. \u00c8 buona pratica gestire il caso in cui getItem restituisca null, soprattutto quando l&#8217;utente visita il sito per la prima volta.<\/p>\n<p style=\"text-align: justify;\">Il metodo <strong>removeItem(chiave)<\/strong> rimuove l&#8217;elemento associato alla chiave specificata. Se la chiave non esiste, il metodo non genera errori, semplicemente non fa nulla. Il metodo <strong>clear()<\/strong> rimuove tutti gli elementi dallo storage dell&#8217;origine corrente. La propriet\u00e0 <strong>length<\/strong> restituisce il numero di elementi memorizzati, e il metodo <strong>key(indice)<\/strong> restituisce il nome della chiave alla posizione specificata.<\/p>\n<p style=\"text-align: justify;\">\u00c8 anche possibile accedere ai dati usando la sintassi a parentesi quadre (localStorage[&#8216;chiave&#8217;]) o la notazione punto (localStorage.chiave), ma i metodi dell&#8217;API sono preferibili per chiarezza del codice e per evitare conflitti con le propriet\u00e0 native dell&#8217;oggetto Storage.<\/p>\n<h2>Serializzazione JSON per Dati Complessi<\/h2>\n<p style=\"text-align: justify;\">Una delle limitazioni pi\u00f9 importanti di Web Storage \u00e8 che memorizza solo <strong>stringhe<\/strong>. Per salvare oggetti JavaScript, array o altri tipi di dati complessi, \u00e8 necessario serializzarli in formato JSON. Questo processo coinvolge due funzioni fondamentali: <strong>JSON.stringify()<\/strong> per la serializzazione (salvataggio) e <strong>JSON.parse()<\/strong> per la deserializzazione (lettura).<\/p>\n<p style=\"text-align: justify;\">Un pattern comune prevede la creazione di funzioni helper che incapsulano la logica di serializzazione, gestendo automaticamente la conversione JSON e i possibili errori di parsing. Questo approccio rende il codice pi\u00f9 pulito e protegge da errori quando i dati memorizzati sono corrotti o non nel formato atteso.<\/p>\n<p style=\"text-align: justify;\">\u00c8 importante ricordare che JSON.stringify() non gestisce tutti i tipi JavaScript: le funzioni, i valori undefined, i Symbol e i riferimenti circolari vengono omessi o causano errori. Le date vengono convertite in stringhe e richiedono una ricostruzione manuale con new Date() durante il parsing. Per strutture dati complesse, pu\u00f2 essere necessario implementare una logica di serializzazione personalizzata.<\/p>\n<h2>Casi d&#8217;Uso Pratici<\/h2>\n<p style=\"text-align: justify;\">Le applicazioni pratiche di Web Storage sono numerose e coprono esigenze comuni dello sviluppo web moderno:<\/p>\n<p style=\"text-align: justify;\"><strong>Preferenze utente<\/strong>: salvare la scelta della modalit\u00e0 chiara\/scura, la lingua preferita, le dimensioni del testo o la configurazione del layout. Queste preferenze vengono memorizzate in localStorage e applicate automaticamente ad ogni visita, migliorando l&#8217;esperienza utente senza richiedere un account.<\/p>\n<p style=\"text-align: justify;\"><strong>Stato dei form<\/strong>: salvare i dati inseriti dall&#8217;utente in un modulo lungo per proteggerli dalla perdita accidentale. Se l&#8217;utente chiude la scheda o la pagina si aggiorna involontariamente, i dati possono essere recuperati dal localStorage e reinseriti nel form. sessionStorage \u00e8 pi\u00f9 appropriato se i dati non devono sopravvivere alla chiusura della scheda.<\/p>\n<p style=\"text-align: justify;\"><strong>Carrello della spesa<\/strong>: memorizzare i prodotti aggiunti al carrello in localStorage permette di mantenere il carrello tra le sessioni senza richiedere un account utente. Questo approccio \u00e8 utilizzato da molti e-commerce per gli utenti non autenticati.<\/p>\n<p style=\"text-align: justify;\"><strong>Cache di dati API<\/strong>: memorizzare temporaneamente le risposte delle API per ridurre le chiamate al server e migliorare le performance percepite. Si associa un timestamp ai dati per implementare una logica di scadenza e garantire che i dati non diventino obsoleti.<\/p>\n<h2>Limiti di Storage e Considerazioni sulla Sicurezza<\/h2>\n<p style=\"text-align: justify;\">I browser impongono un <strong>limite di storage<\/strong> per origine, tipicamente intorno ai 5MB per localStorage e 5MB per sessionStorage. Questo limite varia tra browser e pu\u00f2 essere modificato dalle impostazioni dell&#8217;utente. Quando si supera il limite, il browser genera un&#8217;eccezione QuotaExceededError. \u00c8 buona pratica wrappare le operazioni di scrittura in un blocco try-catch per gestire questa eventualit\u00e0.<\/p>\n<p style=\"text-align: justify;\">Dal punto di vista della <strong>sicurezza<\/strong>, Web Storage non deve mai essere utilizzato per memorizzare informazioni sensibili come password, token di autenticazione, dati di carte di credito o informazioni personali identificabili. I dati nello storage sono accessibili da qualsiasi script JavaScript eseguito sulla pagina, rendendoli vulnerabili ad attacchi XSS (Cross-Site Scripting). Se uno script malevolo riesce ad essere eseguito sulla pagina, pu\u00f2 leggere e inviare tutti i dati dello storage a un server esterno.<\/p>\n<p style=\"text-align: justify;\">L&#8217;evento <strong>storage<\/strong> viene generato quando i dati di localStorage vengono modificati da un&#8217;altra scheda o finestra della stessa origine. Questo evento permette di sincronizzare lo stato tra schede diverse, ad esempio aggiornando il carrello in tutte le schede quando un prodotto viene aggiunto in una di esse. L&#8217;evento non viene generato nella scheda che ha effettuato la modifica, solo nelle altre schede.<\/p>\n<p style=\"text-align: justify;\">Per approfondire come collegare i file JavaScript che utilizzano Web Storage alle tue pagine HTML, consulta la nostra guida su <a href=\"https:\/\/gtechgroup.it\/blog\/collegare-css-javascript-pagina-html\/\">come collegare CSS e JavaScript<\/a>.<\/p>\n<p style=\"text-align: justify;\">Hai bisogno di aiuto con l&#8217;implementazione di Web Storage nella tua applicazione web? <strong>G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a <strong>support@gtechgroup.it<\/strong> o via WhatsApp al <strong>0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La Web Storage API, introdotta con HTML5, ha rivoluzionato il modo in cui le applicazioni web possono memorizzare dati sul browser dell&#8217;utente. Prima della sua&hellip;<\/p>\n","protected":false},"author":2,"featured_media":164229,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Web Storage: localStorage e sessionStorage in HTML5 %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa alla Web Storage API: localStorage e sessionStorage. Metodi, limiti, JSON, confronto con i cookie e sicurezza nello storage browser.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[787],"class_list":["post-164049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164049"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164049\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164229"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}