HTML5 localStorage per risorse (fogli di stile, JavaScript, immagini ecc.)

Question

Per salvare sia il tempo di download del client che l'utilizzo della rete, è possibile utilizzare la funzione localStorage di HTML5 per archiviare il contenuto di fogli di stile collegati, file javascript e dati binari (ad esempio immagini), piuttosto che colpire il server ogni volta?

Sarebbe solo complicare le cose - poiché presumo che tu debba aggiungere la risorsa collegata tramite JavaScript anziché solo un elemento script o link, interrompendo la pagina per quelli senza JavaScript abilitato)? A meno che non sia possibile analizzare il contenuto (utilizzando HEAD richiesto per controllare la data dell'ultima modifica e altre intestazioni) prima che il browser lo scarichi.

O meglio solo attenersi alle intestazioni 304 Not Modified e eTag?

Answer 1

Credo che in questo caso si dovrebbe considerare offline caching:

• https://developer.mozilla.org/en/Offline_resources_in_Firefox#Specifying_a_cache_manifest

È inoltre possibile dati di input archivio utenti in localStorage o sessionStorage:

• https://developer.mozilla.org/en/DOM/Storage#sessionStorage
• https://developer.mozilla.org/en/DOM/Storage#localStorage

Non utilizzare globalStorage (non uno standard).

Ho scritto un articolo su offline, vedo: http://hacks.mozilla.org/2010/01/offline-web-applications/

Si tratta di linea, ma tale meccanismo può essere utilizzato per aumentare il vostro web app.

Answer 2

È possibile codificare in base64 i dati dell'immagine/binari e memorizzarli come stringa in localStorage, utilizzando gli URL base64 non funziona in alcuni browser, quindi non è una soluzione perfetta.

CSS e js andrebbero bene, potresti scriverli nella pagina o usare anche un URL base64.

Non mi preoccuperei di interrompere il sito per utenti non JS, poiché JS è disabilitato non è possibile accedere a localStorage in ogni caso.