Lokal lagring html5 hvordan fjerne. Bruker localStorage for JavaScript-behov

Oversettelse av artikkelen: Hvordan bruke lokal lagring for JavaScript.
Sara Vieira.

Å bli kjent med det grunnleggende om JavaScript-programmering begynner ofte med å lage enkle applikasjoner, for eksempel den elektroniske notatboken vi bruker til å registrere ting og hendelser som vi kan glemme. Men slike applikasjoner har ett problem - etter at siden er lastet inn på nytt, forsvinner listen over alle tidligere venstre oppføringer, det vil si at applikasjonen går tilbake til sin opprinnelige tilstand.

Det er en veldig enkel vei ut av denne situasjonen, som innebærer å bruke den lokale lagringsmekanismen localStorage. På grunn av det faktum at localStorage lar oss lagre de nødvendige dataene på brukerens datamaskin, vil listen over planlagte oppgaver og hendelser nevnt ovenfor fortsatt være tilgjengelig etter en sideinnlasting, i tillegg er localStorage en overraskende veldig enkel måte å lagre data og få tilgang til det når det er nødvendig.

Hva er localStorage?

Dette er en lokal datalagringsmekanisme som er en del av Web Storage-teknologien levert av HTML5-spesifikasjonen. Det er to alternativer for datalagring tillatt av denne spesifikasjonen:

Lokal lagring: lar deg lagre informasjon uten begrensninger på lagringsperioder. Det er dette alternativet vi skal bruke, siden listen over oppgaver i vårt eksempel må lagres permanent.
Bruk av økter: sikrer sikkerheten til data bare i løpet av en økt, det vil si etter at brukeren lukker fanen på applikasjonen vår og åpner den på nytt, vil all informasjon som er nødvendig for videre drift av applikasjonen bli slettet.

Enkelt sagt, alt Web Storage gjør er å lagre data i skjemaet navngitt nøkkel/verdi lokalt og i motsetning til de to andre metodene, som hver har sine egne ulemper ( Lagring av øktinformasjon innebærer bruk av serversiden for dette, dessuten, etter at brukerens økt er stengt, slettes denne informasjonen, og informasjonskapsler, selv om de bruker klientsiden til lagring, er ikke pålitelige fordi brukeren kan avbryte sin støtte gjennom nettleserinnstillingene. ) lagrer data selv i så fall hvis du lukker nettleseren eller slår av datamaskinen. ( *Jeg tok meg friheten til å endre litt og legge til innholdet i dette avsnittet, fordi jeg mener at forfatteren har gjort unøyaktigheter i originalen.)

HTML

Hvis vi holder oss til vårt eksempel, der vi ønsker å lage en elektronisk versjon av en notatbok, er alle nødvendige komponenter for implementeringen nedenfor:

Felt for å legge inn nye oppføringer (hendelser, gjøremål osv.).
Knapp for å bekrefte den angitte oppføringen.
En knapp for å slette en allerede opprettet gjøremålsliste.
En uordnet liste som vil fylles på med elementer i form av nye oppføringer.
Til slutt trenger vi en div som en beholder som inneholder meldinger som skal vises til brukeren, for eksempel en advarsel om at han glemte å skrive inn verdien til neste oppføring, slik at inndatafeltet er tomt.

Som et resultat bør markeringen vår se omtrent slik ut:

Dette er en helt standard HTML-mal som vi kan fylle med dynamisk generert innhold ved hjelp av JavaScript.

JavaScript

Gitt strukturen til den enkle notisblokkapplikasjonen i vårt eksempel, er det første vi må gjøre å gi sporing for knappen-klikk-hendelsen "Legg til oppføring" og sjekk om det er lagt inn informasjon i tekstfeltet for oppføringen, det vil si at i det øyeblikket knappen trykkes, skal den ikke være tom. Noe sånt som dette:

$("#add").click(function() (
//hvis tekstfeltet er tomt
$("#alert").html(" Oppmerksomhet! Skriv inn oppføringen i tekst
felt.");
returner falsk;
}

Dette er hva vi gjør med denne kodebiten. Når knappen trykkes "Legg til oppføring" vi sjekker om brukeren har skrevet inn noe i det nye feltet. Hvis han ikke gjorde dette, vises div-en vi oppga for å vise meldinger, og informerer brukeren om at oppføringsfeltet for oppføringen ikke er fylt ut, og deretter, etter 1000ms (1 sekund), div-elementet, og følgelig meldingen, forsvinner. Funksjonen returnerer deretter false , hvoretter nettleseren slutter å kjøre resten av skriptet og applikasjonen er igjen klar til å legge inn en ny oppføring.

Vårt neste trinn vil være å legge til verdien som er angitt i oppføringsfeltet til begynnelsen av listen ved å generere et nytt listeelement. Når brukeren legger til en annen oppføring, vil den derfor alltid bli plassert i begynnelsen av listen over planlagte gjøremål og forventede hendelser. Etter dette er alt vi trenger å gjøre å lagre listen ved å bruke localStorage-mekanismen:

// Legg til en oppføring i den eksisterende listen
$("#todos").prepend("

"+Beskrivelse+"

");
// Tøm inntastingsfeltet
$("#form").reset();

returner falsk;
});

Som du kanskje har lagt merke til er det ikke noe uvanlig her, standardversjonen av jQuery-koden brukes. Der vi får tilgang til localStorage-objektet, må vi spesifisere dataene vi lagrer i nøkkel/verdi-form. Du kan bruke et vilkårlig navn for nøkkelen, og jeg ga den navnet "todos", så må vi indikere hva vi faktisk trenger å lagre i minnet. I dette tilfellet er det et komplett fragment av HTML-markering inkludert i en uordnet liste (plassert mellom kodene), ved hjelp av hvilken alle oppføringer som tidligere er lagt inn av brukeren, vises. Fra koden kan du se at vi ganske enkelt henter fragmentet vi trenger ved å bruke jQuery .html()-metoden og på slutten, etter å ha fullført alle nødvendige handlinger, setter vi returverdien til funksjonen til false , som forhindrer skjemadataene fra å bli sendt inn og derfor laste inn siden vår på nytt.

La oss nå si at brukeren vår tidligere har gjort flere oppføringer, og for videre normal drift av applikasjonen må vi sjekke om localStorage inneholder informasjon som tidligere er lagret på datamaskinen, og i så fall vise den for brukeren. Siden nøkkelnavnet vårt er "todos", bør vi sjekke om det eksisterer slik:

// hvis det allerede er data i den lokale lagringen, vis den

}

For å sjekke for tilstedeværelsen av data, brukte vi en vanlig if-setning, og hvis betingelsen vi spesifiserte ble oppfylt, hentet vi ganske enkelt alle dataene fra lokal lagring, og plasserte dem som HTML-oppmerking i en uordnet liste, som viser oppføringene som er lagt inn tidligere. av brukeren.

Hvis du sjekker driften av den enkle applikasjonen din, vil du finne at etter å ha lastet inn siden på nytt, forblir alt på plass. Og nå, det siste vi trenger å gjøre er å lage en funksjon som brukeren, om nødvendig, kan slette alle sine oppføringer med. Dette implementeres ved å tømme localStorage og laste inn siden på nytt for å aktivere endringene som er gjort. Deretter setter vi, som i forrige tilfelle, false som returverdien til funksjonen, som forhindrer hashen i å vises i URL-en. ( *og ruller ikke opp på siden.):

// Fullfør opprydding av localStorage
window.localStorage.clear();
location.reload();
returner falsk;
});

Som et resultat har vi en fullt fungerende applikasjon. Og setter vi alle de ovennevnte fragmentene sammen, får vi den komplette søknadskoden:

$("#add").click(function() (
var Beskrivelse = $("#description").val();
if($("#description").val() == "") (
$("#alert").html(" Oppmerksomhet! Skriv inn oppføring i
tekstfelt.");
$("#alert").fadeIn().delay(1000).fadeOut();
returner falsk;
}
$("#todos").prepend("

"
+ Beskrivelse + "

");
$("#form").reset();
var todos = $("#todos").html();
localStorage.setItem("todos", todos);
returner falsk;
});

if(localStorage.getItem("todos")) (
$("#todos").html(localStorage.getItem("todos"));
}

$("#clear").click(function() (
window.localStorage.clear();
location.reload();
returner falsk;
});

Nettleserstøtte.

HTML5-spesifikasjonen gir ganske kraftig støtte for Web Storage-teknologi, på grunn av hvilken den også implementeres av de fleste populære nettlesere, til og med IE8. Det eneste problemet er fortsatt IE7, hvis du fortsatt er interessert.

Konklusjon.

I slike små applikasjoner kan localStorage-mekanismen ganske vellykket erstatte bruken av databaser. For å lagre små mengder data er det ikke nødvendig å bruke mer komplekse alternativer.

* Oversetterens notat.

Visninger av innlegg: 475

Jeg sendte deg en artikkel med en historie om HTML5 LocalStorage i nettlesere. Vi gir ham ordet.

Jeg prøvde å skrive den enkleste og mest forståelige veiledningen for bruk av lokal lagringsteknologi. Artikkelen viste seg å være ganske kort, på grunn av det faktum at selve teknologien og virkemidlene for å jobbe med den ikke er kompliserte. For å komme i gang trenger du bare å kunne litt JavaScript. Så bruk 10 minutter på denne artikkelen, og du kan trygt legge til linjen "Jeg kan jobbe med localStorage" på CV-en din.

Hva er localStorage?

Slik ser et JavaScript-objekt ut:

Var myCar = ( hjul: 4, dører: 4, motor: 1, navn: "Jaguar" )

Og slik ser JSON ut. Nesten det samme som et vanlig js-objekt, bare alle egenskaper må være omgitt av anførselstegn.

( "firstName": "Ivan", "lastName": "Ivanov", "address": ( "streetAddress": "Moskovskoe sh., 101, leilighet 101", "city": "Leningrad", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

For å forstå hva localStorage er, se for deg at det et sted i nettleseren din er et slikt objekt innebygd som vi kan bruke. Samtidig sletter ikke dette objektet verdiene som vi skriver der hvis vi laster inn siden på nytt eller til og med lukker nettleseren helt.

I JavaScript-termer er localStorage en egenskap til det globale nettleserobjektet (vinduet). Den kan nås som window.localStorage eller ganske enkelt localStorage.

Det er også verdt å si at nettleseren har en localStorage-klone kalt sessionStorage. Deres eneste forskjell er at sistnevnte lagrer data bare for én fane (økt) og vil ganske enkelt rydde plass så snart vi lukker fanen

La oss se på det live. For eksempel, i Google Chrome må du åpne DevTools (F12), gå til "Ressurser" -fanen og i venstre rute vil du se localStorage for dette domenet og alle verdiene som det inneholder.

Du bør forresten vite hvordan localStorage fungerer med domener. For hvert domene oppretter nettleseren din sitt eget localStorage-objekt, og det kan bare redigeres eller vises på det domenet. Mydomain-1.com-domenet kan for eksempel ikke få tilgang til localStorage til mydomain-2.com .

Hvorfor trenger jeg localStorage?

LocalStorage er nødvendig for bare én ting - å lagre visse data mellom brukerøkter. Du kan tenke på tusen og én ting som kan lagres i nettleserens lokale lagring. For eksempel nettleserspill som bruker den som en lagringsfil, eller registrerer øyeblikket da brukeren stoppet mens han så en video, ulike data for skjemaer, etc.

Hvordan kommer jeg i gang med localStorage?

Veldig enkelt.

Å jobbe med localStorage er veldig likt å jobbe med objekter i JavaScript. Det er flere metoder for å jobbe med det.

localStorage.setItem("nøkkel", "verdi")

En metode som legger til en ny nøkkel med en verdi til localStorage (og hvis en slik nøkkel allerede eksisterer, overskriver den den med en ny verdi). Vi skriver for eksempel localStorage.setItem('myKey', 'myValue');

localStorage.getItem("nøkkel")

Vi tar en bestemt verdi fra nøkkellageret.

localStorage.removeItem("Nøkkel")

Ta ut nøkkelen

localStorage.clear()

Rydder all lagring

Nå kan du åpne fanen localStorage i nettleseren din og øve deg på å registrere og hente data fra denne lagringen selv. Hvis noe skjer, skriver vi all koden i en js-fil.

//Legg til eller endre verdien: localStorage.setItem("myKey", "myValue"); //nå har du nøkkelen "myKey" med verdien "myValue" lagret i localStorage //Output den til konsollen: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //remove: localStorage.removeItem("myKey"); //tøm hele lagringen localStorage.clear() Det samme, bare med hakeparenteser: localStorage["Key"] = "Verdi" //setting av verdien localStorage["Key"] //Få verdien delete localStorage[" Key"] // Fjern verdi

Jeg vil også merke meg at localStorage fungerer utmerket med nestede strukturer, for eksempel objekter.

//opprett et objekt var obj = ( item1: 1, item2: , item3: "hei" ); var serialObj = JSON.stringify(obj); //serialize it localStorage.setItem("myKey", serialObj); //skriv den til lagringen med nøkkelen "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //parse den tilbake som et objekt

Du bør også vite at nettlesere allokerer 5 MB til lokal lagring. Og hvis du overskrider det, vil du motta et QUOTA_EXCEEDED_ERR-unntak. Du kan forresten bruke den til å sjekke om det fortsatt er plass på lageret ditt.

Prøv ( localStorage.setItem("nøkkel", "verdi"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Grensen overskredet"); ) )

I stedet for en konklusjon

Jeg vil at utviklere skal trekke en enkel konklusjon fra denne korte artikkelen at denne teknologien allerede kan brukes i sin helhet på prosjektene dine. Den har god standardisering og utmerket støtte, som bare utvikler seg over tid.

Svært ofte er den første JavaScript-applikasjonen en Todo-liste, men problemet med slike applikasjoner er at etter at siden er oppdatert, forsvinner alle elementene i listen.

En enkel løsning på dette problemet er å bruke lokal lagring(Lokal lagring). Lokal lagring lar deg lagre data på brukerens maskin og du kan enkelt laste ned listen fra den etter å ha oppdatert siden. I denne artikkelen vil vi skrive en liten gjøremålsliste ved å bruke lokal lagring.

Hva er lokal lagring?

Lokal lagring ("nettlagring") var opprinnelig en del av HTML5-spesifikasjonen, men har nå blitt flyttet til sin egen. Det er to måter å lagre data på:

Lokal lagring: vedvarende lagring, dette er hva vi skal bruke.
Øktlagring: lagrer data kun for denne økten, hvis brukeren lukker siden, vil dataene gå tapt.

Lokal lagring lar deg lagre data i form av nøkkelverdi-par på brukerens datamaskin, og disse dataene vil være tilgjengelige selv etter at du har lukket nettleseren eller slått av datamaskinen.

HTML

For å lage en gjøremålsliste trenger vi:

Tekstinntasting for å legge inn elementets innhold.
Knapp for å legge til et element i listen.
Knapp for å tømme listen.
Selve listen (
- Og en ekstra div for å vise feil.
Så HTML-markeringen vil se slik ut:
En ganske enkel struktur som vi vil bringe til live med JavaScript.
Fordi vi bruker jQuery, vi må koble det i tillegg.
JavaScript
Først må vi spore klikket på legg til-knappen og sjekke at inndatafeltet ikke er tomt:
$("#add").click(function() ( var Beskrivelse = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Advarsel! Du lot gjøremålet stå tomt"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
Denne koden sjekker verdien av tekstinndata, og hvis den er tom, viser den en feil og returnerer false slik at resten av koden ikke kjøres og elementet ikke legges til i listen.
// sett inn oppføring $("#todos").prepend("
"+Beskrivelse+"
"); // slett alt som er igjen i tekstfeltet $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos ); return false ));
For å jobbe med lokal lagring må du oppgi en nøkkel og dens tilsvarende verdi. I vårt tilfelle, la oss kalle nøkkelen 'todos', og verdien vil være all HTML-koden som finnes i listen (i taggen
- "+Beskrivelse+"

Dvs.	Firefox	Safari	Chrome	Opera	iPhone	Android
–	–	4.0+	4.0+	10.5+	3.0+	2.0+

Lokal lagring html5 hvordan fjerne. Bruker localStorage for JavaScript-behov

Hva er localStorage?

HTML

JavaScript

Nettleserstøtte.

Konklusjon.

Hva er localStorage?

Hvorfor trenger jeg localStorage?

Hvordan kommer jeg i gang med localStorage?

I stedet for en konklusjon

Hva er lokal lagring?

HTML

JavaScript

Nettleserstøtte

Konklusjon

En kort historie om lokal lagring før HTML5

Bruker HTML5-lagring

HTML5-lagringsområdeovervåking

Begrensninger i gjeldende nettlesere

HTML5-lagring i aksjon

Utover nøkkel-/verdipar: Konkurransedyktig visjon