Web storage - JavaScript

JavaScript window.localStorage og window.sessionStorage bruges til at gemme data på brugerens computer

Introduktion

Web storage gør det muligt at gemme data på brugerens computer med JavaScript.

Web storage er lidt ligesom cookies, bare bedre.

Data gemmes i key/value par i streng format.

I Web storage bruges localStorage og sessionStorage.

Forskel på localStorage og sessionStorage

localStorage beholder dataene på brugerens computer på ubestemt tid. Dataene beholdes når browseren lukkes.
localStorage har samme data for hele domænet. 2 sider/faneblade/vinduer har adgang til de samme data i localStorage.
localStorage bruger localStorage.setItem(), localStorage.removeItem() og localStorage.clear().

sessionStorage sletter dataene når sessionen afsluttes. Hvilket typisk vil være når browseren/fanebladet lukkes.
sessionStorage har hver sin data for hver sin side/faneblad/vindue så dataene ikke blandes.
sessionStorage bruger sessionStorage.setItem(), sessionStorage.removeItem() og sessionStorage.clear().

Demo 1

Når der bliver ændret i web storage med enten setItem(), removeItem() eller clear() så udløser det storage eventen.

Jeg har læst at storage eventen kun skal udløses når der sker en ændring og ikke når man sætter en key til samme værdi. Men i Internet Explorer 9 udløses "storage" eventen lige meget om værdien sættes til det samme eller noget andet.

localStorage (Sæt, Hent, Slet) demo

Demo 2

En ting som web storage kan bruges til er at gemme volume indstillingen når brugeren ændres lydstyrken for <audio> og <video>.

Den gemte indstilling kan så bruges til at sætte det samme volume niveau på hele hjemmesiden og huske indstillingen når brugeren besøger hjemmesiden i fremtiden.

Prøv og juster lydstyrken i afspilleren også luk browseren/fanebladet og besøge denne side igen og se om lydstyrken ikke er den samme som sidst du besøgte siden.

Husk volume demo

Demo 3

Følgende demo viser hvor mange gange brugeren har besøgt siden.

localStorage/sessionStorage demo

localStorage : Du har besøgt siden gange i alt.

sessionStorage : Du har besøgt siden gange i denne session.

Prøv at åben denne side i et nyt faneblad og se hvordan tallene ændre sig.

Alle faneblade har adgang til de samme data i localStorage.

Hvert faneblad har sin egen sessionStorage, som de andre faneblade ikke har adgang til.

Demo 4

Prøv og skriv noget i tekstfeltet, luk browseren/fanebladet og besøg siden igen.
Det du har skrev skulle gerne blive indlæst fra web storage.

Notesblok demo

storage event demo

Brug demoerne ovenfor for at ændre på data også kig her igen for at se om storage eventen er blevet udløst.

Brug Internet Explorer for at se denne demo da Internet Explorer i skrivende stund er den eneste browser der understøtter storage eventen.
storage eventen udløses også i Firefox hvis man bruges et andet faneblad men af en eller anden grund ikke i samme faneblad.

For ikke at gøre hjemmesiden meget langsom har jeg valgt ikke at vise oldValue og newValue som indeholder tidligere værdi og ny værdi fordi det kan gøre siden meget langsom når der er meget data

storage event demo (key, oldValue, newValue, url, storageArea)

Her kommer beskeder når "storage" eventen udløses

Browsertest

FIND BROWSERENS LOCALSTORAGE OG SESSIONSTORAGE DATAGRÆNSE


Prøv også Web Storage Support Test.

Browserunderstøttelse af web storage

Browser LocalStorage
og maksimum antal tegn
SessionStorage
og maksimum antal tegn
"storage"
event
Firefox logo
Firefox 27.0.1
ja
5.242.880
10
ja
5.242.880
10
ja9
Opera logo
Opera 17.0
ja
5.242.880
ja
5.242.880
nej
Safari logo
Safari 5.1.7
ja
2.621.440
ja
?
4
nej
Chrome logo
Chrome 30.0.1599.69 m
ja
5.242.880
ja
5.242.880
nej
Internet Explorer logo
Internet Explorer 10.0.9200.165408
ja
5.000.000
1
ja
5.000.000
1
ja
Alle tests er udført på Windows 7 (64-bit)


1 Firefox 10.0.2 og Internet Explorer 9 og 10 gider ikke bruge localStorage og sessionStorage hvis filen med koden er indlæst direkte fra et drev (for eksempel "file:///C:/Users/Administrator/Desktop/test.html"). Men det virker hvis filen sendes gennem en HTTP server (for eksempel "http://localhost/test.html").

2 Firefox 10.0.2 har nogen gange en grænse for maksimum antal tegn (for eksempel omkring 5.242.880 tegn). Og så nogen gange er der ikke nogen grænse... mærkeligt.

3 Ifølge "Dive into JavaScript" skulle Opera understøtte "storage" events. Men det syntes jeg ikke den gør.

4 Browseren kommer med "Error: Out of memory" exeptions ved forskellige antal MB. Køre jeg en test så kan Safari sige "Out of memory" ved 50 MB for eksempel, køres testen igen kommer fejlen ved 18 MB, også ved 10 MB også ved 7 MB og lavere og lavere.

5 Nogen gange kun 760.584 eller 138.850 eller 138.641 eller 138.519 eller 0 eller 4.176.879 byte af en eller anden grund. Det har måske nogen med intranetindstillinger at gøre. Hvis man nulstiller browseren i Internetndstillinger→Avanceret→Nulstil... så man kan få datagrænsen op til 5.000.000 men så af en eller anden grund så kan det falde igen.

6 Hvis der gemmes over omkring 255 MB data i sessionStorage så får man en "allocation size overflow" execption. Gemmes samme mængde data i localStorage så stopper scriptet tilsyneladende men uden en exeception.

7 sessionStorage virker ikke hvis filen med koden er indlæst direkte fra et drev (for eksempel "file:///C:/Users/Administrator/Desktop/test.html"), så giver Firefox fejlen "Operation is not supported". Man kan ikke engang skrive console.log(window.sessionStorage); det giver samme fejl. Men man kan fange exectipen med try { x } catch (error) { x } også får man beskeden Exception... "Operation is not supported" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)". Det virker hvis filen sendes gennem en HTTP server (for eksempel "http://localhost/test.html").

8 Første gang siden besøges lokalt (C:\\ file://) kommer beskeden "Kørsel af Script og ActiveX-objekter på denne webside er blevet begrænset af i Internet Explorer. Tillad blokeret indhold.

9 Kan godt udløse "storage" eventen fra et andet faneblad men ikke i samme faneblad af en eller anden grund.

10 Datagrænsen kan ændres for både localStorage og sessionStoage ved at sætte about:config?filter=dom.storage.default_quota til det antal KB man maksimalt ønsker skal kunne gemmes.
Browserunderstøttelse fra caniuse.com :

Når grænsen er nået

Browserne bestemmer selv hvor meget data hjemmesiden som standard må gemme med web storage.
Det svinger fra browser til browser og fra version til version.

Der kan også være forskel på hvor meget data der må gemmes i localStorage og sessionStorage.

Det lader til at browserne for det meste tillader hver hjemmeside at gemme 5 MB data i localStorage og 5 MB i sessionStorage.
Nogle browsere kan spørger brugeren om tilladelse til at øge datagrænsen hvis der forsøges at gemme mere data end tilladt.

Opera 11.60.
opera kvote for varigt lager QUOTA_EXCEEDED_ERR
Vælger man Afvis kommer beskeden ikke mere men man kan fås den tilbage ved at vælge Opsætning→Indstillinger...→Avanceret→Indhold→Administrer webstedsindstillinger...→[Vælg siden på listen]→Slet

Firefox 20.0.1.
Firefox dette website () forsøger at gemme mere end 50 MB data på din computer til offline brug

Forsøges datagrænsen overgået giver det exception QUOTA_EXCEEDED_ERR (fejlkode 22) når man forsøger at gemme dataene med setItem().

Her er fejlbeskeder fra forskellige browsere ved forsøg på at gemme mere data end tilladt

Firefox 10.0.2 : [Exception... "Persistent storage maximum size reached" code: "1014" nsresult: "0x805303f6 (NS_ERROR_DOM_QUOTA_REACHED)" location: "http://localhost/netkoder/storage.php Line: 745"]

Opera 11.60 : DOMException: QUOTA_EXCEEDED_ERR

Safari 5.1.2 : Error: QUOTA_EXCEEDED_ERR: DOM Exception 22

Chrome 16 : Error: QUOTA_EXCEEDED_ERR: DOM Exception 22

Internet Explorer 9 : DOM Exception: QUOTA_EXCEEDED_ERR (22)


Med try { } catch() { } kan man fange disse fejl.

globalStorage

globalStorage is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use localStorage instead.

Cookies i forhold til web storage

Web storage minder lidt om cookies da de begge handler om at gemme data på brugerens computer som efterfølgende kan hentes.

Cookie data er begrænset til for eksempel 4 KB data.
Cookies sendes hver gang siden besøges fra klient til server (hvilket er unødvendigt).

Web storage kan typisk gemme op til 5 MB data (browseren kan eventuelt spørge brugeren om mere plads).
Web storage sender ikke dataene fra klient til server.

Data typer

Alle værdier gemt med web storage omdammes automatisk til strenge før de gemmes.

Man skal vist ikke gøre noget specielt når dataene gemmes. Alt sammen omdannes vist automatisk med .toString method.

Men når man skal hente dataene som skal være en anden type data end streng så kan man bruge Number(), parseInt() eller parseFloat().

Jeg har endnu ikke check på dette endnu så ved ikke om det er rigtigt.

Ryd browserens web storage data

Firefox

Historik→Ryd seneste historik...→["Fjern" = "Hele min historik"]→Cookies→Ryd nu

eller

Tools→Clear Recent History→["Time range to clear" = "Everything"]→Cookies→Clear Now

Web storage data er gemt i en fil kaldet webappsstore.sqlite i profiles mappen (Kan findes ved at besøge about:support og ved Profilmappe tyk på Åbn mappe).

Opera før-blink

Opsætning→Indstillinger...→Avanceret→Indhold→Administrer webstedsindstillinger...→[Vælg siden på listen]→Slet

Opera blink

Måske i opera://settings/clearBrowserData.

Safari

Rediger→Indstillinger...→Anonymitet→"Fjern alle data fra websteder..."

(Ser dog ikke ud til at rydde session data)

Chrome

Valgmuligheder→Avancerede valgmuligheder→Ryd browserdata ...→"Slet cookies og andre websteds- og plugindata"

Syntax



Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.