Lokal lagring html5 hur man rensar. Översikt över lagringsverktyg på klientsidan

Att lagra data direkt i webbläsaren har många fördelar, den främsta är snabb och nätverksoberoende åtkomst till "databasen". På det här ögonblicket Det finns fyra aktiva metoder för detta (plus en utfasad):

Lokalt utrymme
Sessionslagring
IndexeradDB
WebSQL (utfasad)

Småkakor

Cookies är ett klassiskt sätt att lagra enkla strängdata i ett dokument. Vanligtvis skickas cookies från servern till klienten, som kan lagra dem och sedan skicka tillbaka dem 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 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 såsom användarinställningar.

Grundläggande CRUD-operationer med cookies

// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Läs (alla) console.log(document.cookie); // Uppdatera document.cookie = "user_age=24;max-age=31536000;secure"; // Ta bort document.cookie = "user_name=Ire Aderinokun;expires=Tor, 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 tillkomsten 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 delmängd av Web Storage API, ett speciellt API för att lagra data i webbläsaren i ett 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, övervinns detta genom att konvertera till JSON. På så sätt 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("user", JSON.stringify(user)); // Läs (Singel) console.log(JSON.parse(localStorage.getItem("user"))) // Uppdatera const updatedUser = ( namn: "Ire Aderinokun", ålder: 24 ) localStorage.setItem("user", JSON.stringify(updatedUser)); // Ta bort localStorage.removeItem("användare");

Fördelar med lokal lagring

Erbjuder ett enklare och mer intuitivt datalagringsgränssnitt.
Säkrare för att lagra data på klienten.
Låter dig lagra mer data (alla 3 punkter - jämfört med cookies).

Nackdelar med lokal lagring

Låter dig endast lagra strängar

Webbläsarstöd

Sessionslagring

Sessionslagring är den andra typen av Web Storage API. Det är exakt samma sak som lokal lagring förutom att data endast lagras för webbläsarflikens session. Så snart användaren navigerar bort från sidan och stänger webbläsaren rensas data.

Grundläggande CRUD-operationer med sessionslagring

// Create const user = ( namn: "Ire Aderinokun", ålder: 25 ) sessionStorage.setItem("user", JSON.stringify(user)); // Läs (Singel) console.log(JSON.parse(sessionStorage.getItem("user"))) // Uppdatera const updatedUser = ( namn: "Ire Aderinokun", ålder: 24 ) sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Ta bort sessionStorage.removeItem("användare");

Fördelarna, nackdelarna och stödet i webbläsare är exakt desamma som för lokal lagring.

IndexeradDB

IndexedDB är en mycket mer komplex och mogen lösning för att lagra data i webbläsaren, eftersom det är ett lågnivå-API för att lagra betydande mängder strukturerad data på klienten. I grunden är det en objektorienterad databas baserad på JavaScript som gör att vi enkelt kan lagra och hämta data indexerad med nyckel.

WebSQL

WebSQL är en relationsdatabas 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.

Granskning av webblagring

På Internet kan information lagras på två ställen: på webbservern och på webbklienten (d.v.s. sidans besökares dator). Vissa typer av data lagras bäst på en av dessa platser och andra typer på en annan.

Rätt plats att lagra konfidentiell och viktig data är en webbserver. Till exempel, om du lägger till varor i din varukorg i en webbutik, lagras data om ditt potentiella köp på en webbserver. Endast några byte spårningsdata som innehåller information om dig (eller snarare om din dator) lagras på din dator så att webbservern vet vilken vagn 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 den bästa metoden, eftersom... 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 renderas) och applikationstillstånd (en ögonblicksbild av webbapplikationens aktuella tillstånd) lokalt så att besökaren kan fortsätta köra den från samma punkt senare .

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 lite klumpig. Cookiesystemet tvingar också utvecklaren att fiffla med utgångsdatum och i onödan 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å klientdator på obestämd tid, skickas inte till webbservern (om inte utvecklaren gör det själv), kan vara stor i storlek och kräver bara ett par enkla, effektiva JavaScript-objekt att arbeta med.

Denna funktion kallas webblager och är särskilt lämplig att använda med offlineläge arbete med webbplatser, eftersom låter dig skapa fristående offlineapplikationer som kan spara all information de behöver även när det inte finns någon internetanslutning.

HTML5 webblagringsfunktion gör att en webbsida kan lagra data på besökarens dator. Denna information kan vara kortsiktig, som raderas när du stänger av webbläsaren, eller långvarig, som förblir tillgänglig vid efterföljande besök på webbsidan.

Information som lagras i webblagring lagras faktiskt inte på Internet, utan på webbsidans besökares dator. Webblagring innebär med andra ord att data inte lagras på Internet, utan att data från Internet lagras.

Det finns två typer av webblagring, som på något sätt är förknippade med två objekt:

Lokalt utrymme

Använder objekt lokalt utrymme att lagra data för hela webbplatsen på permanent basis. Detta innebär att om en webbsida lagrar data i 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. Vissa webbläsare implementerar detta som en allt-eller-inget-strategi och raderar all lokal data, ungefär som att cookies raderas. (Faktum är att i vissa webbläsare är cookiesystemet och den lokala lagringen sammankopplade, så det enda sättet att radera lokal data är att ta bort cookies.) Och andra webbläsare kan tillåta användaren att se data för varje enskild webbplats och radera data för en eller flera utvalda platser.

Sessionsdatalagring

Använder objekt sessionStorage för tillfällig lagring av data för ett webbläsarfönster eller flik. Denna data är endast tillgänglig tills användaren stänger fönstret eller fliken, varefter sessionen avslutas och data raderas. Men sessionsdata behålls om användaren går till en annan webbplats och sedan kommer tillbaka igen, så länge det sker i samma webbläsarfönster.

Ur ett webbsideskodperspektiv fungerar både lokal lagring och sessionsdatalagring exakt likadant. Den enda skillnaden är datalagringstiden.

Använda lokal lagring ger bästa möjligheten för att spara den nödvändiga informationen för efterföljande besök på webbsidan av användaren. Och sessionslagret används för att lagra data som behöver överföras från en sida till en annan. (Sessionslagring kan också lagra temporär data som bara används på en enda sida, men vanliga JavaScript-variabler fungerar bra för detta ändamål.)

Både lokal lagring och sessionslagring är associerad med webbplatsdomänen. Således, om du sparar data för www..html-sidan i lokal lagring, kommer dessa data att vara tillgängliga för www..html-sidan, eftersom båda dessa sidor har samma domän. Men denna data kommer inte att vara tillgänglig för sidor på andra domäner.

Dessutom eftersom 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 information som den har lagrat på en annan dator. På samma sätt skapar en webbsida separat lokal lagring om du loggar in med ett annat användarnamn eller kör 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 prestandaoptimering och cachelagra stora mängder bilder eller videor i den (och i själva verket är lokal lagring inte avsedd för sådana ändamål).

För lagring av stora mängder data, en databasstandard som fortfarande utvecklas IndexeradDB tillåter lokal lagring av mycket större mängder - vanligtvis 50 MB till att börja med och mer om användaren samtycker.

Sparar data

Innan en information kan placeras i lokal eller sessionslagring måste den ges 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["användarnamn"] = "Ivan Petrov";

Naturligtvis är det inte meningsfullt att spara ett fragment av statisk text. Vanligtvis behöver vi lagra vissa variabla data, till exempel dagens datum, resultatet av en matematisk beräkning eller textdata som angetts av användaren i formulärfält. Följande är ett exempel på hur du sparar användarinmatad textdata:

webblager Denna text kommer att sparas i lokal lagring:
Denna text kommer att sparas i sessionsdatalagret:

Funktion saveData() ( // Hämta värdena för textfälten var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Spara den inmatade texten i textfältet till lokal lagring localStorage["localData"] = localData // Spara texten i textfältet till sessionslagring sessionStorage["sessionData"] = sessionData funktion loadData() ( // Ladda sparade data från storage var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Visa dessa data i textfält if (localData != null) (document.getElementById("localData").value = localData; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Sidan innehåller två textfält: för lokal lagring (överst) och för sessionslagring (längst ned). 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.

Webblagring 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 snarare än localStorage["användarnamn"]. Båda typerna av syntax är likvärdiga, och att använda den ena eller den andra är en fråga om personlig preferens.

Webblagring fungerar inte utan en webbserver

I din webblagringsforskning 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, det viktigaste är bara att förhindra att sidor körs från lokalt hårddisk(Till exempel, dubbelklicka efter sidfilikon).

Denna funktion är sidoeffekt hur webbläsare allokerar lokalt lagringsutrymme. Som tidigare nämnts begränsar webbläsare lokal lagring per webbplats till 5MB, vilket kräver att de associerar varje sida som vill använda lokal lagring med webbplatsens domän.

Så vad händer om du öppnar en sida som använder webblagring från din lokala hårddisk? Allt beror på webbläsaren. Webbläsare Utforskaren verkar helt tappa stödet för webblagring. LocalStorage- och sessionStorage-objekten försvinner och försök att använda dem orsakar ett JavaScript-fel.

I Firefox webbläsare localStorage- och sessionStorage-objekten förblir på plats och verkar ha stöd (även Modernizr bestämmer att de stöds), men allt som skickas till lagring försvinner till Gud vet var. I Chrome webbläsareåterigen något annorlunda - det mesta av webblagringsfunktionaliteten fungerar som den ska, men vissa funktioner (som onStorage-händelsen) fungerar inte.

Liknande problem uppstår när du använder File API. Så du kommer att spara dig själv mycket krångel om du lägger sidan du testar på en testserver för att undvika alla dessa osäkerheter.

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 stora webbläsarna som stöder webblagring:

Alla dessa webbläsare tillhandahåller lokal lagring och sessionsdatalagringsmöjligheter. Men stöd för onStorage-händelsen kräver senare versioner av webbläsare, som IE 9, Firefox 4 eller Chrome 6.

Den mest problematiska versionen är IE 7, som inte alls stöder webblagring. 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 denna lucka, finns några bra utgångspunkter på HTML5 Cross Browser-sidan (under "Webblagring").

Hej alla! I den här artikeln ska vi titta på 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. Så låt oss prata om dem. Kaka väldigt begränsad. Ett kaka kanske bara 4096 tecken, och deras antal per domän är ungefär 30-50 beroende på webbläsaren. I lokalt lager kan vi förvara 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, men den andra inte, även om detta också kan göras, men mer om det lite senare. Använda sig av lokalt utrymme där du inte behöver nära arbete med servern, utan behöver lagra en del temporär data. Låt oss till exempel föreställa oss 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, ingen anledning. Det är här den ska användas lokalt utrymme. En person kommer in, skriver in uppgifter, de registreras på en speciell plats i hans webbläsare och lagras där. När en person loggar in igen efter en tid kommer de att väljas och visas därifrån. Till exempel, genom att klicka 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 det.

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 detta:

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"); // kommer att radera data under den godkända nyckeln
localStorage.clear(); // rensa helt lokal lagring

För att kontrollera om det lokala lagringsutrymmet är fullt kan du använda konstanten QUOTA_EXCEEDED_ERR

Prova (
localStorage.setItem("nyckel", "värde");
) fånga (e) (
if (e == QUOTA_EXCEEDED_ERR) (
alert("Gränsen överskriden");
}
}

Det är allt du behöver veta om lokalt utrymme. Det är värt att säga att det förutom detta objekt finns ett annat - sessionStorage. Den skiljer sig endast genom att den lagrar data för endast en flik, och den 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.

Slutsats

Så använd lokalt utrymme där du inte behöver kommunicera med servern, utan måste 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 att sidan har uppdaterats 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 ner 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 sin egen. Det finns två sätt att lagra data:

Lokalt utrymme: beständig lagring, det här är vad vi kommer att använda.
Sessionslagring: lagrar data endast för denna session, om användaren stänger sidan kommer data att gå förlorade.

Lokal lagring låter dig lagra data i form av nyckel-värdepar på användarens dator, och denna data kommer att vara tillgänglig även efter att du har stängt webbläsaren eller stängt av datorn.

HTML

För att skapa en att göra-lista behöver vi:

Textinmatning för inmatning av elementets innehåll.
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 HTML-uppmärkning kommer se ut så här:
En ganska enkel struktur som vi kommer att väcka till liv med JavaScript.
Därför att vi använder jQuery, vi 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").click(function() ( var Beskrivning = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Varning! Du lämnade uppgiften 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 körs och elementet inte läggs till i listan.
// infoga posten $("#todos").prepend("
"+Beskrivning+"
"); // radera allt som finns kvar i textfältet $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos ); return false ));
För att arbeta med lokal lagring måste du ange en nyckel och dess motsvarande värde. I vårt fall, låt oss kalla nyckeln "todos", och värdet kommer att vara all HTML-kod som finns i listan (i taggen
- "+Beskrivning+"