Att lagra data direkt i webbläsaren har många fördelar, den främsta är snabb och nätverksoberoende åtkomst till "databasen". Det finns för närvarande 4 aktiva metoder för detta (plus en utfasad):
- Lokalt utrymme
- Sessionslagring
- IndexeradDB
- WebSQL (utfasad)
Småkakor
Cookies är det klassiska sättet att lagra enkla strängdata i ett dokument. Vanligtvis skickas cookies från servern till klienten, som kan lagra dem och sedan skicka tillbaka till servern som svar på efterföljande förfrågningar. Detta kan användas för saker som att hantera kontosessioner eller spåra användarinformation.
Dessutom kan cookies också användas för att enkelt lagra data på klientsidan. Därför används de också ofta för att lagra allmänna data som användarpreferenser.
Grundläggande CRUD-cookieoperationer
// Create document.cookie = "user_name = Ire Aderinokun"; document.cookie = "user_age = 25; max-age = 31536000; säker"; // Läs (alla) console.log (document.cookie); // Uppdatera document.cookie = "user_age = 24; max-age = 31536000; säker"; // Ta bort document.cookie = "user_name = Ire Aderinokun; expires = Tors, 01 Jan 1970 00:00:01 GMT";
Fördelar med cookies
- De kan användas för att kommunicera med servern.
- Vi kan ställa in cookies så att de upphör att gälla automatiskt istället för att manuellt radera dem.
Nackdelar med cookies
- De läggs till vid inläsningen av dokumentsidan
- De kan lagra en liten mängd data
- De kan bara innehålla strängar.
- Potentiella säkerhetsproblem.
- Denna metod har inte rekommenderats för att lagra data på klienten sedan introduktionen av Web Storage API (lokal och sessionslagring).
Webbläsarstöd
Cookies har grundläggande stöd i alla större webbläsare.
Lokalt utrymme
Lokal lagring är en av varianterna av Web Storage API, ett speciellt API för att lagra data i webbläsaren i nyckel-värde-format. Detta API skapades som en lösning på cookieproblem och är mer intuitivt och på ett säkert sätt lagra enkel data i webbläsaren.
Även om vi tekniskt sett bara kan lagra strängar i lokal lagring, förbigås detta genom att konvertera till JSON. Därmed kan vi lagra mer komplex data i lokal lagring jämfört med cookies.
Grundläggande CRUD-operationer med lokal lagring
// Create const user = (namn: "Ire Aderinokun", ålder: 25) localStorage.setItem ("användare", JSON.stringify (användare)); // Läs (Singel) console.log (JSON.parse (localStorage.getItem ("användare"))) // Uppdatera const updatedUser = (namn: "Ire Aderinokun", ålder: 24) localStorage.setItem ("användare", JSON.stringify (updatedUser)); // Ta bort localStorage.removeItem ("användare");
Fördelar med lokal lagring
- Erbjuder ett enklare och mer intuitivt lagringsgränssnitt.
- Säkrare för att lagra data på klienten.
- Tillåter att lagra mer data (alla 3 punkter - i jämförelse med cookies).
Nackdelar med lokal lagring
- Tillåter att endast lagra strängar
Webbläsarstöd
Sessionslagring
Sessionslagring är den andra varianten av Web Storage API. Det är exakt samma som lokal lagring, förutom att data lagras endast för webbläsarflikens session. Så snart användaren lämnar sidan och stänger webbläsaren rensas uppgifterna.
Grundläggande lagringsoperationer för CRUD-sessioner
// Create const user = (namn: "Ire Aderinokun", ålder: 25) sessionStorage.setItem ("användare", JSON.stringify (användare)); // Läs (Singel) console.log (JSON.parse (sessionStorage.getItem ("användare"))) // Uppdatera const updatedUser = (namn: "Ire Aderinokun", ålder: 24) sessionStorage.setItem ("användare", JSON.stringify (updatedUser)); // Ta bort sessionStorage.removeItem ("användare");
För-, nackdelarna och webbläsarstödet är exakt samma som lokal lagring.
IndexeradDB
IndexedDB är en mycket mer komplex och sofistikerad lösning för att lagra data i webbläsaren, eftersom det är ett lågnivå-API för att lagra en betydande mängd strukturerad data på klienten. I grunden är det en JavaScript-baserad objektorienterad databas som gör att vi enkelt kan lagra och hämta nyckelindexerad data.
WebSQL
WebSQL är ett relations-API på klientsidan som liknar SQLite. Sedan 2010 arbetsgrupp W3C har avbrutit arbetet med denna specifikation och detta API är inte längre en del av HTML-specifikationen och bör inte användas.
Översikt över webblagring
På Internet kan information lagras på två ställen: på webbservern och på webbklienten (d.v.s. sidans besökares dator). Vissa datatyper lagras bäst på en av dessa platser och andra typer på en annan.
Rätt plats att lagra känslig och viktig data på är en webbserver. Till exempel, om du lägger till varor i din varukorg i en webbutik, lagras dina potentiella köpdata på en webbserver. Endast ett fåtal byte spårningsdata lagras på din dator, som innehåller information om dig (eller snarare, om din dator) så att webbservern vet vilken hink som är din. Även med de nya funktionerna i HTML5 finns det inget behov av att ändra detta system - det är pålitligt, säkert och effektivt.
Men att lagra data på en server är inte alltid det bästa sättet. ibland är det lättare att lagra icke väsentlig information på användarens dator. Det är till exempel vettigt att lagra användarinställningar (t.ex. inställningar som bestämmer hur en webbsida visas) och applikationstillstånd (en ögonblicksbild av webbapplikationens aktuella tillstånd) lokalt så att besökaren kan fortsätta där den var på ett senare tillfälle.
Före HTML5 var det enda sättet att lagra data lokalt att använda filmekanismen småkakor som ursprungligen utformades för att utbyta små mängder identifierande information mellan webbservrar och webbläsare. Cookies är idealiska för att lagra små mängder data, men JavaScript-modellen för att arbeta med dem är något klumpig. Cookiesystemet tvingar också utvecklaren att pilla med utgångsdatum och onödigt skicka data fram och tillbaka över internet med varje sidförfrågan.
HTML5 introducerar ett bättre alternativ till cookies, vilket gör det enkelt och enkelt att lagra information på en besökares dator. Denna information kan lagras på klientdatorn på obestämd tid, skickas inte till webbservern (om inte utvecklaren gör det själv), den kan vara stor och kräver bara ett par enkla, effektiva JavaScript-objekt att arbeta med.
Denna möjlighet kallas webblager och är särskilt lämplig att använda med offlineläge arbete med webbplatser, eftersom låter dig skapa fristående applikationer som kan spara all information de behöver även när det inte finns någon internetanslutning.
HTML5 webblagringsfunktioner gör att en webbsida kan lagra data på en besökares dator. Denna information kan vara kortsiktig, som raderas efter att webbläsaren stängts av, eller långvarig, som förblir tillgänglig vid efterföljande besök på webbsidan.
Informationen som lagras i webblagringen lagras faktiskt inte på Internet, utan på webbsidans besökares dator. Med andra ord betyder webblagring inte att lagra data på Internet, utan att lagra data från Internet.
Det finns två typer av webblagring som på något sätt är associerade med två objekt:
Lokalt utrymmeAnvänder objekt lokalt utrymme att lagra data för hela webbplatsen på permanent basis. Detta innebär att om en webbsida sparar data till lokal lagring, kommer denna data att vara tillgänglig för användaren när han återvänder till den webbsidan nästa dag, nästa vecka eller nästa år.
Naturligtvis ger de flesta webbläsare också användaren möjlighet att rensa lokal lagring. I vissa webbläsare är det implementerat som en allt-eller-inget-strategi, och den raderar all lokal data, ungefär som en cookie raderas. (Faktum är att i vissa webbläsare är cookies och lokal lagring sammankopplade, så det enda sättet att radera lokal data är att radera cookies.) Andra webbläsare kan ge användaren en vy över data för varje enskild webbplats och radera data för vald webbplats eller webbplatser.
SessionsdatalagerAnvänder objekt sessionStorage för tillfällig lagring av data för ett fönster eller webbläsarflik. Dessa data är endast tillgängliga tills användaren stänger fönstret eller fliken, varefter sessionen avslutas och data raderas. Men sessionsdata kvarstår om användaren navigerar till en annan webbplats och sedan kommer tillbaka, förutsatt att detta sker i samma webbläsarfönster.
Ur webbsideskodens synvinkel fungerar både lokal lagring och sessionsdatalagring exakt likadant. Den enda skillnaden är varaktigheten av datalagringen.
Använda lokal lagring ger bästa möjligheten för att spara den information som krävs för efterföljande besök på webbplatsen av användaren. Och sessionslagret används för att lagra data som behöver överföras från en sida till en annan. (Session Store kan också lagra temporär data som används av endast en sida, men vanliga JavaScript-variabler fungerar utmärkt för detta ändamål.)
Både lokal lagring och sessionslagring är associerad med webbplatsdomänen. Således, om du sparar data för sidan www..html i det lokala lagringsutrymmet, kommer dessa data att vara tillgängliga för sidan www..html, eftersom båda dessa sidor har samma domän. Men denna information kommer inte att vara tillgänglig för sidor på andra domäner.
Dessutom sedan webblagring finns på din dator (eller mobilenhet) given användare, den är kopplad till den här datorn och webbsidan öppnas på den här datorn och lagrar data i sin lokala lagring, har inte tillgång till informationen som den har lagrat på en annan dator. På samma sätt skapar webbsidan en separat lokal butik om du loggar in med ett annat användarnamn eller startar en annan webbläsare.
Även om HTML5-specifikationen inte anger några hårda och snabba regler för maximal lagring, begränsar de flesta webbläsare den till 5 MB. Du kan packa mycket data i den här volymen, men det räcker inte om du vill använda lokal lagring för att optimera prestanda och cachelagra stora bilder eller videor i den (och i själva verket är lokal lagring inte utformad för sådana ändamål ).
En databasstandard som fortfarande utvecklas för att lagra stora datamängder IndexeradDB Tillåter mycket mer lokal lagring - vanligtvis 50 MB till att börja med och mer om du samtycker.
Sparar data
Innan du kan lägga en del information i lokal eller sessionslagring måste du ge den ett beskrivande namn. Detta namn kallas nyckel och behövs för att data ska kunna hämtas i framtiden.
Syntaxen för att spara en bit data är följande:
localStorage = data;
// JS localStorage ["username"] = "Ivan Petrov";
Naturligtvis är det ingen mening att spara en bit statisk text. Som regel behöver vi till exempel lagra en del variabel data dagens datum, resultatet av en matematisk beräkning, eller textdata som angetts av användaren i formulärfälten. Följande är ett exempel på lagring av användarinmatad textdata:
Funktion saveData () (// Hämta värdena för textrutorna var localData = document.getElementById ("localData"). Value; var sessionData = document.getElementById ("sessionData"). Värde; // Spara den inmatade texten i textrutan till lokal lagring localStorage ["localData"] = localData; // Spara texten som skrivits in i textfältet till sessionslagring sessionStorage ["sessionData"] = sessionData;) funktion loadData () (// Ladda den sparade data från lagringarna var localData = localStorage ["localData"]; var sessionData = sessionStorage ["sessionData"]; // Visa denna data i textfält if (localData! = null) (document.getElementById ("localData"). värde = localData;) if (sessionData! = null) (document.getElementById ("sessionData"). värde = sessionData;))
Sidan innehåller två textrutor: för lokal lagring (överst) och för sessionslagring (nederst). Genom att klicka på knappen Spara sparas texten som skrivits in i textfälten, och genom att klicka på knappen Ladda visas motsvarande sparade data i fälten.
Web Storage stöder också den mindre vanliga egendomssyntaxen. Enligt reglerna för denna syntax hänvisar vi till lagringsplatsen med namnet användarnamn som localStorage.username, inte localStorage ["användarnamn"]. Båda typerna av syntax är likvärdiga, och användningen av den ena eller den andra är en fråga om personlig preferens.
Webblagring fungerar inte utan en webbserver
I din forskning om webblagring kan du stöta på oväntat problem... I många webbläsare fungerar webblagring endast för sidor som tillhandahålls av webbservern. Det spelar ingen roll var servern finns, på Internet eller på din egen dator, viktigast av allt, bara för att förhindra att sidor startas från det lokala hårddisk(till exempel, dubbelklicka genom sidfilikonen).
Denna funktion är sidoeffekt hur webbläsare allokerar lokalt lagringsutrymme. Som tidigare nämnts begränsar webbläsare lokal lagring för varje webbplats till 5MB genom att associera varje sida som vill använda lokal lagring med webbplatsens domän.
Vad händer när du öppnar en sida som använder webblagring från din lokala hårddisk? Allt beror på webbläsaren. webbläsare Explorer tycks tappa stödet för webblagring helt. LocalStorage- och sessionStorage-objekten försvinner och försök att använda dem ger ett JavaScript-fel.
V Firefox webbläsare localStorage- och sessionStorage-objekten förblir på plats och verkar stödjas (även Modernizr upptäcker att de stöds), men allt som skickas till lagring försvinner till ingen vet var. V Chrome webbläsare igen, något annat - det mesta av funktionaliteten i webblagring fungerar som den ska, men vissa funktioner (till exempel onStorage-händelsen) fungerar inte.
Liknande problem uppstår med File API. Därför sparar du dig själv mycket krångel om du testar sidan på en testserver för att undvika alla dessa oklarheter.
Webbläsarstöd för webblagring
Webblagring är en av de mest stödda funktionerna i HTML5, med en bra nivå av stöd i alla större webbläsare. Tabellen nedan visar minimiversionerna av de större webbläsarna som stöder webblagring:
Alla dessa webbläsare tillhandahåller lokal och sessionslagringskapacitet. Men för att stödja onStorage-evenemanget krävs senare versioner av webbläsare, som IE 9, Firefox 4 eller Chrome 6.
Det mest problematiska är IE 7, som inte stöder webblagring alls. Som en lösning kan du emulera webblagring med hjälp av cookies. Det är det inte riktigt perfekt lösning men det fungerar. Även om det inte finns något officiellt skript för att täppa till detta gap, kan några bra utgångspunkter hittas på HTML5 Cross Browser-sidan (under "Webblagring").
Hej allihopa! I den här artikeln kommer vi att analysera vad är localStorage och hur man använder det.
Introduktion
Lokalt utrymme- lokalt utrymme. De där. detta är en speciellt utsedd plats i webbläsaren (något som en liten databas) där vi kan skriva, läsa och radera vissa data. Faktum är att lokal lagring är mycket lik KAKA men det finns skillnader. Låt oss prata om dem. Kaka väldigt begränsad. Ett kaka kanske allt 4096 tecken och deras antal per domän är ungefär 30-50 beroende på webbläsaren. I lokalt lager kan vi lagra 5-10 mb eller ännu mer under lång tid.
Var man kan använda dem
Den största skillnaden kaka från lokalt utrymme- det här är att den första fungerar med servern och den andra inte, även om detta också kan göras, men mer om det senare. Använda sig av lokalt utrymme där du inte behöver nära arbete med servern, utan du behöver lagra en del temporär data. Låt oss till exempel säga att du skapar någon form av webbapplikation dit en person kan gå, ange flera uppgifter som han vill göra på en dag och radera de som han redan har slutfört. Varför behöver vi en server här? Det stämmer, det finns ingenting. Det är här du bör använda lokalt utrymme... En person går in, anger uppgifter, de registreras på en speciell plats i hans webbläsare och lagras där. När en person kommer in igen efter ett tag kommer den att väljas och visas därifrån. Om du till exempel klickar på en uppgift tas den bort från lokalt utrymme och kommer därför inte längre att visas för honom. Låt oss gå vidare till hur man använder den.
Hur man använder localStorage
Uppgifterna lagras på samma sätt som i kaka - nyckelvärde... För att lägga till ett nytt värde, skriv så här:
LocalStorage.setItem ("nyckel", "värde");
Vi använder localStorage-objekt och hans metod setItem, där vi skickar nyckeln och värdet.
För att få information, skriv följande:
Var värde = localStorage.getItem ("nyckel");
Som ett resultat, in i variabeln värde kommer att få värdet som är lagrat under nyckeln som vi skickar till metoden getItem.
Raderar data
LocalStorage ("nyckel"); // radera data under den godkända nyckeln
localStorage.clear (); // rensa upp lokal lagring helt
För att kontrollera om det lokala lagret är fullt kan du använda konstanten QUOTA_EXCEEDED_ERR
Prova (
localStorage.setItem ("nyckel", "värde");
) fånga (e) (
if (e == QUOTA_EXCEEDED_ERR) (
varning ("gränsen överskriden");
}
}
Det är allt som finns att veta om lokalt utrymme... Det är värt att säga att förutom detta objekt finns det ytterligare en - sessionStorage... Det skiljer sig endast genom att det lagrar data för endast en flik, och de kommer att raderas så snart användaren stänger fliken.
I början av artikeln sa jag det lokalt utrymme skapat för att lagra lokal data och inte kommunicera med servern, men vi har fortfarande en sådan möjlighet. Jag tror att vissa kanske redan har gissat hur man gör detta. Så om du behöver skicka lite data till servern gör du följande: hämta data från lokal lagring, konvertera den till Json sträng och skicka med hjälp av teknik Ajax... Du kan också ta emot dem från servern.
Resultat
Så använd lokalt utrymme där du inte behöver kommunicera med servern, utan behöver lagra data lokalt, i användarens webbläsare. Vi har täckt allt du behöver för detta i den här artikeln. Tack för din uppmärksamhet och vi ses snart!
Mycket ofta är den första JavaScript-applikationen en Todo-lista, men problemet med sådana applikationer är att efter uppdatering av sidan försvinner alla listobjekt.
En enkel lösning på detta problem är att använda lokalt utrymme(Lokalt utrymme). Lokal lagring låter dig lagra data på användarens maskin och du kan enkelt ladda listan från den efter att ha uppdaterat sidan. I den här artikeln kommer vi att skriva en liten att göra-lista med hjälp av lokal lagring.
Vad är lokal lagring?
Lokal lagring ("webblagring") var ursprungligen en del av HTML5-specifikationen, men har nu flyttats till en separat. Det finns två sätt att lagra data:
- Lokalt utrymme: beständig lagring, det är vad vi kommer att använda.
- Sessionslagring: lagrar endast data för denna session, om användaren stänger sidan kommer data att gå förlorade.
Lokal lagring tillåter lagring av data på användarens dator i form av nyckel-värdepar, och dessa data kommer att vara tillgängliga även efter att webbläsaren stängts eller datorn stängts av.
Html
För att skapa en att göra-lista behöver vi:
- Textinmatning för att mata in innehållet i elementet.
- Knapp för att lägga till ett objekt i listan.
- Knapp för att rensa listan.
- Själva listan (
- ).
- Och en extra div för att visa fel.
Således kommer HTML-uppmärkningen att se ut så här:
Ganska enkel struktur som vi animerar med JavaScript.
Eftersom vi använder jQuery, du måste dessutom ansluta den.
JavaScript
Först måste vi spåra klicket på lägg till-knappen och kontrollera att inmatningsfältet inte är tomt:
$ ("# add"). klicka (funktion () (var Beskrivning = $ ("# beskrivning"). val (); if ($ ("# beskrivning"). val () == "") ($ ( "#alert"). html (" Varning! Du lämnade att göra tom "); $ (" # alert "). FadeIn (). Delay (1000) .fadeOut (); return false;)
Denna kod kontrollerar värdet på textinmatningen och, om den är tom, visar den ett fel och returnerar false så att resten av koden inte exekveras och elementet inte läggs till i listan.
// infoga posten $ ("# todos"). prepend ("
För att arbeta med lokal lagring måste du ange en nyckel och ett motsvarande värde. I vårt fall, låt oss kalla nyckeln "todos", och värdet kommer att vara hela HTML-koden som finns i listan (i taggen
- ). Denna kod är lätt att få med använder jQuery... Slutligen returnerar vi false för att förhindra att formuläret skickas och inte laddar om sidan.
- "+ Beskrivning +" "); $ (" # form "). reset (); var todos = $ (" # todos "). html (); localStorage.setItem (" todos ", todos); return false;)); if (localStorage .getItem ("todos")) ($ ("# todos"). html (localStorage.getItem ("todos"));) $ ("# clear"). klicka (funktion () (window.localStorage.clear ( ); location.reload (); return false;));));
Nästa steg är att kontrollera den lokala lagringen, om ett värde med "todos"-nyckeln finns, ladda sedan listan från den lokala lagringen:
If (localStorage.getItem ("todos")) ($ ("# todos"). Html (localStorage.getItem ("todos"));)
Eftersom vi lagrar den färdiga HTML-koden i butiken, sedan infogar vi bara den här koden i listan.
Vår att göra-lista är nästan klar, allt som återstår är att implementera funktionen för att rensa listan. När användaren klickar på knappen kommer hela listan att raderas och den lokala lagringen rensas:
$ ("# clear"). klicka (funktion () (window.localStorage.clear (); location.reload (); return false;));
Redo! Hela koden ser ut så här:
$ (dokument) .ready (funktion () ($ ("# add"). klicka (funktion () (var Beskrivning = $ ("# beskrivning"). val (); if ($ ("# beskrivning"). val () == "") ($ ("# varning"). html (" Varning! Du lämnade uppgiften tom "); $ (" # alert "). FadeIn (). Delay (1000) .fadeOut (); return false;) $ (" # todos "). Prepend ("
Webbläsarstöd
Alla större webbläsare stöder webblagring, även IE8. Det enda att oroa sig för är IE7 och lägre.
Slutsats
Lokal lagring i så små applikationer kan vara en bra ersättning för en databas. Att lagra små mängder information borde inte vara svårt.
