Probeer localStorage in een live playground en kopieer daarna werkende voorbeelden voor opgeslagen voorkeuren, een winkelwagen en een thema, plus JSON-verwerking, groottelimieten, fouten en synchronisatie tussen tabbladen.
localStorage is een key-value-opslag per origin in de browser die data bewaart nadat het tabblad en de browser zijn gesloten. U roept setItem(key, value) aan om op te slaan, getItem(key) om te lezen, removeItem(key) om te verwijderen en clear() om alles te legen. Waarden zijn altijd strings, dus verpak objecten met JSON.stringify en JSON.parse.
De hele Storage API op één kaart
De meeste localStorage-bugs komen voort uit drie verrassingen: alles wordt een string, de aanroep kan een fout gooien, en de data is gebonden aan één exacte origin. De playground hieronder schrijft naar uw eigen browser, zodat u die regels in actie ziet. Daarna tonen de voorbeelden veilige patronen voor voorkeuren, een winkelwagen en een themaschakelaar.
MDN documenteert een limiet van 5 MiB localStorage per origin in de huidige browsers, met een aparte 5 MiB voor sessionStorage. Strings worden opgeslagen als UTF-16, dus het aantal tekens dat erin past is lager dan het aantal bytes doet vermoeden. Schrijven boven de limiet gooit een QuotaExceededError.
Nee. Items blijven staan totdat uw code ze verwijdert of de bezoeker de sitegegevens wist. In een privévenster wist de browser ze wanneer het laatste privétabblad sluit. Als u een vervaldatum nodig hebt, sla dan een tijdstempel op bij de waarde en controleer die bij het lezen.
setItem zet alles wat u doorgeeft om in een string. Een gewoon object wordt de tekst [object Object] en de data gaat verloren. Sla JSON.stringify(obj) op en lees het terug met JSON.parse.
Nee. Opslag hoort bij een origin, en dat is het schema, de host en de poort samen. http://example.com en https://example.com krijgen elk hun eigen aparte opslag, en subdomeinen ook.
Luister naar het storage-event op window. Het wordt afgevuurd in de andere geopende documenten van dezelfde origin wanneer een ervan een waarde wijzigt, en bevat de key, oldValue en newValue. Het tabblad dat de wijziging maakte, ontvangt het niet.
Cookies gaan bij elk verzoek mee naar de server en zijn geschikt voor sessies. localStorage verlaat de browser nooit, bevat meer, en is geschikt voor interfacestatus zoals een thema, een concept of een ingeklapte zijbalk.
Kies de opslag op basis van hoe lang de data moet blijven en wie hem nodig heeft
Eén plek handelt geblokkeerde opslag, een vol quotum en kapotte JSON af, zodat de rest van uw code dat nooit hoeft te doen.
Standaardwaarden worden samengevoegd met wat er is opgeslagen, zodat een nieuwe instelling later toevoegen oudere opgeslagen data niet breekt.
Elke wijziging maakt een nieuwe array en schrijft die terug. De server bepaalt bij het afrekenen nog steeds de prijzen.
Als er niets is opgeslagen, wint de instelling van het besturingssysteem. Voer dit vroeg in de head uit om een flits van het verkeerde thema te voorkomen.
localStorage heeft geen ingebouwde vervaldatum, dus sla de deadline op bij de waarde en verwijder verouderde items bij het lezen.
Het storage-event bereikt elk ander tabblad op dezelfde origin, zodat een winkelwagenbadge kan bijwerken zonder te herladen.
Opslag is geblokkeerd in deze browser, dus elke aanroep zou een fout gooien. Uw code heeft een fallback nodig.
Gooide {name}: {message}
Voer eerst een key in.
{call} heeft {n} tekens opgeslagen.
{call} gaf null terug: er is geen item met die key.
JSON.parse gaf terug: {value}
Opgeslagen tekst is geen JSON: {value}
{call} gaf de string {value} terug
{call} uitgevoerd.
{n} playground-items verwijderd. Andere keys op deze site zijn ongemoeid gelaten.
Sla items op in uw eigen browser, lees en verwijder ze, en bekijk elke key die deze site opslaat. Playground-keys beginnen met demo: zodat ze nooit botsen met de site.
Key
Waarde
Waardetype
Gewone string
Object (JSON)
Opslaan
Lezen
Verwijderen
Playground-keys wissen
Resultaten verschijnen hier.
Playground-items opgeslagen in uw browser ({n})
Opgeslagen string
Gratis beginnen · Geen creditcard nodig