Tämä on täysin tavallinen HTML-malli, jonka voimme täyttää dynaamisesti luodulla sisällöllä JavaScriptin avulla.

JavaScript

Kun otetaan huomioon esimerkissämme olevan yksinkertaisen muistilehtiösovelluksen rakenne, ensimmäinen asia, joka meidän on tehtävä, on tarjota seuranta painikkeen napsautustapahtumalle "Lisää merkintä" ja tarkista, onko merkinnän tekstikenttään syötetty tietoja, eli painiketta painettaessa sen ei pitäisi olla tyhjä. Jotain tällaista:

$("#lisää").click(function() (
//jos tekstikenttä on tyhjä
$("#alert").html(" Huomio! Kirjoita merkintä tekstinä
ala.");
palauttaa väärä;
}

Näin teemme tällä koodinpalalla. Kun painiketta painetaan "Lisää merkintä" tarkistamme, onko käyttäjä syöttänyt mitään uuteen syöttökenttään. Jos hän ei tehnyt tätä, näkyviin tulee viestien näyttämiseen antamamme div, joka ilmoittaa käyttäjälle, että merkinnän syöttökenttää ei ole täytetty, ja sitten 1000 ms:n (1 sekunnin kuluttua) div-elementti ja vastaavasti viesti, katoaa. Funktio palauttaa sitten arvon false , minkä jälkeen selain lopettaa muun skriptin suorittamisen ja sovellus on jälleen valmis syöttämään uutta merkintää.

Seuraava askel on lisätä syöttökenttään syötetty arvo luettelon alkuun luomalla uusi listaelementti. Siten, kun käyttäjä lisää toisen merkinnän, se sijoitetaan aina suunniteltujen tehtävien ja odotettujen tapahtumien luettelon alkuun. Tämän jälkeen meidän tarvitsee vain tallentaa luettelo käyttämällä localStorage-mekanismia:

// Lisää merkintä olemassa olevaan luetteloon
$("#todos").prepend("

Kuten olet ehkä huomannut, tässä ei ole mitään epätavallista, käytetään jQuery-koodin vakioversiota. Kun käytämme localStorage-objektia, meidän on määritettävä tallentamamme tiedot avain/arvo-muodossa. Voit käyttää mielivaltaista nimeä avaimelle, ja minä nimesin sen "tehtävät", meidän on ilmoitettava, mitä meidän on todella tallennettava muistiin. Tässä tapauksessa se on täydellinen fragmentti HTML-merkinnöistä, joka sisältyy järjestämättömään luetteloon (sijaitsee tagien välissä), jonka avulla näytetään kaikki käyttäjän aiemmin syöttämät merkinnät. Koodista näet, että haemme yksinkertaisesti tarvitsemamme fragmentin jQuery .html() -menetelmällä ja lopuksi, kun kaikki tarvittavat toimenpiteet on suoritettu, asetamme funktion palautusarvoksi false , mikä estää lomaketietoja lähettämisestä ja siksi sivumme uudelleenlataamisesta.

Oletetaan nyt, että käyttäjämme on tehnyt aiemmin useita merkintöjä, ja sovelluksen normaalia toimintaa varten meidän on tarkistettava, sisältääkö localStorage aiemmin tietokoneelle tallennettuja tietoja, ja jos on, näytettävä ne käyttäjälle. Koska avainnimemme on "todos", meidän tulisi tarkistaa sen olemassaolo seuraavasti:

// jos paikallisessa tallennustilassa on jo dataa, näytä se

}

Tietojen saatavuuden tarkistamiseksi käytimme tavallista if-lausetta, ja jos määrittämämme ehto täyttyi, haimme yksinkertaisesti kaikki tiedot paikallisesta tallennustilasta ja sijoitimme ne HTML-merkinnäksi järjestämättömään luetteloon, joka näyttää aiemmin syöttämät merkinnät. käyttäjä.

Jos tarkistat yksinkertaisen sovelluksesi toiminnan, huomaat, että sivun uudelleenlataamisen jälkeen kaikki pysyy paikoillaan. Ja nyt viimeinen asia, joka meidän on tehtävä, on luoda toiminto, jolla käyttäjä voi tarvittaessa poistaa kaikki merkinnänsä. Tämä toteutetaan tyhjentämällä localStorage ja lataamalla sivu uudelleen aktivoidaksesi tehdyt muutokset. Seuraavaksi asetamme edellisen tapauksen tapaan funktion palautusarvoksi false, mikä estää tiivisteen näkymisen URL-osoitteessa. ( *eikä rullaa sivua ylöspäin.):

// LocalStoragen täydellinen puhdistus
window.localStorage.clear();
location.reload();
palauttaa väärä;
});

Tämän seurauksena meillä on täysin toimiva sovellus. Ja yhdistämällä kaikki yllä olevat fragmentit yhteen, saamme täydellisen sovelluskoodin:

$("#lisää").click(function() (
var Kuvaus = $("#kuvaus").val();
if($("#kuvaus").val() == "") (
$("#alert").html(" Huomio! Syötä sisääntulo
tekstikenttä.");
$("#alert").fadeIn().delay(1000).fadeOut();
palauttaa väärä;
}
$("#todos").prepend("

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

$("#clear").click(function() (
window.localStorage.clear();
location.reload();
palauttaa väärä;
});

Selaimen tuki.

HTML5-spesifikaatio tarjoaa varsin tehokkaan tuen Web Storage -teknologialle, minkä ansiosta se on toteutettu myös suosituimmissa selaimissa, jopa IE8:ssa. Ainoa ongelma on IE7, jos olet edelleen kiinnostunut.

Johtopäätös.

Tällaisissa pienissä sovelluksissa localStorage-mekanismi voi varsin menestyksekkäästi korvata tietokantojen käytön. Pienten tietomäärien tallentamiseen ei ole tarpeen käyttää monimutkaisempia vaihtoehtoja.

*Kääntäjän huomautus.

Viestin katselukerrat: 475

Lähetin sinulle artikkelin HTML5 LocalStoragesta selaimissa. Annamme hänelle puheenvuoron.

Yritin kirjoittaa yksinkertaisimman ja ymmärrettävimmän oppaan localStorage-tekniikan käyttöön. Artikkeli osoittautui melko lyhyeksi, koska itse tekniikka ja sen kanssa työskentelyvälineet eivät ole monimutkaisia. Aloitaksesi sinun tarvitsee vain tuntea hieman JavaScriptiä. Joten käytä 10 minuuttia tähän artikkeliin ja voit turvallisesti lisätä ansioluetteloosi rivin "Voin työskennellä localStoragen kanssa".

Mikä on localStorage?

JavaScript-objekti näyttää tältä:

Var myCar = ( pyörät: 4, ovet: 4, moottori: 1, nimi: "Jaguar")

Ja tältä JSON näyttää. Melkein sama kuin tavallinen js-objekti, vain kaikki ominaisuudet tulee laittaa lainausmerkkeihin.

( "etunimi": "Ivan", "sukunimi": "Ivanov", "osoite": ( "katuosoite": "Moskovskoe sh., 101, apt. 101", "city": "Leningrad", "postalCode": 101101 ), "phoneNumbers": [ "812 123-1234", "916 123-4567" ] )

Ymmärtääksesi, mitä localStorage on, kuvittele, että selaimessasi on jossain sellainen objekti, jota voimme käyttää. Samanaikaisesti tämä objekti ei tyhjennä arvoja, joita kirjoitamme, jos lataamme sivun uudelleen tai jopa suljemme selaimen kokonaan.

JavaScriptin termein localStorage on globaalin selainobjektin (ikkunan) ominaisuus. Sitä voidaan käyttää nimellä window.localStorage tai yksinkertaisesti localStorage.

On myös syytä sanoa, että selaimessa on localStorage-klooni nimeltä sessionStorage. Niiden ainoa ero on, että jälkimmäinen tallentaa tiedot vain yhdestä välilehdestä (istunnosta) ja tyhjentää tilansa heti, kun suljemme välilehden.

Katsotaanpa sitä livenä. Esimerkiksi Google Chromessa sinun on avattava DevTools (F12), siirryttävä Resurssit-välilehteen ja vasemmassa ruudussa näet tämän verkkotunnuksen paikallisen tallennustilan ja kaikki sen sisältämät arvot.

Muuten, sinun pitäisi tietää, kuinka localStorage toimii verkkotunnusten kanssa. Selaimesi luo jokaiselle toimialueelle oman localStorage-objektin, ja sitä voidaan muokata tai tarkastella vain kyseisessä toimialueella. Esimerkiksi verkkotunnus mydomain-1.com ei voi käyttää mydomain-2.com paikallista tallennustilaa.

Miksi tarvitsen paikallista tallennustilaa?

LocalStoragea tarvitaan vain yhteen asiaan - tiettyjen tietojen tallentamiseen käyttäjäistuntojen välillä. Voit ajatella tuhat ja yksi asiaa, jotka voidaan tallentaa selaimen paikalliseen tallennustilaan. Esimerkiksi selainpelit, jotka käyttävät sitä tallennustiedostona tai tallentavat hetken, jolloin käyttäjä pysähtyi katsoessaan videota, erilaisia ​​tietoja lomakkeille jne.

Kuinka pääsen alkuun localStoragen käytön?

Erittäin yksinkertainen.

Työskentely localStoragen kanssa on hyvin samanlaista kuin JavaScript-objektien kanssa työskentely. Sen kanssa työskentelemiseen on useita tapoja.

localStorage.setItem("avain", "arvo")

Menetelmä, joka lisää uuden avaimen arvolla localStorageen (ja jos tällainen avain on jo olemassa, se korvaa sen uudella arvolla). Kirjoitamme esimerkiksi localStorage.setItem('myKey', 'myValue');

localStorage.getItem("avain")

Otamme tietyn arvon avainvarastosta.

localStorage.removeItem("Avain")

Avaimen poistaminen

localStorage.clear()

Tyhjennetään kaikki tallennustila

Nyt voit avata selaimessasi LocalStorage-välilehden ja harjoitella itse tallentamista ja tietojen hakemista tästä tallennustilasta. Jos jotain tapahtuu, kirjoitamme kaiken koodin js-tiedostoon.

//Lisää tai muuta arvoa: localStorage.setItem("myKey", "myValue"); //nyt sinulla on avain "myKey" arvolla "myValue" tallennettuna localStorageen //Lähetä se konsoliin: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //remove: localStorage.removeItem("myKey"); //tyhjennä koko tallennuspaikka localStorage.clear() Sama asia, vain hakasulkeilla: localStorage["Key"] = "Arvo" //arvon asettaminen localStorage["Key"] //Arvon saaminen delete localStorage[" Key"] // Poista arvo

Haluaisin myös huomauttaa, että localStorage toimii hyvin sisäkkäisten rakenteiden, esimerkiksi objektien, kanssa.

//luo objekti var obj = ( item1: 1, item2: , item3:"hei" ); var serialObj = JSON.stringify(obj); //serialize it localStorage.setItem("myKey", serialObj); //kirjoita se muistiin avaimella "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //jäsennys se takaisin objektina

Sinun tulisi myös tietää, että selaimet varaavat 5 Mt paikallista tallennustilaa varten. Ja jos ylität sen, saat QUOTA_EXCEEDED_ERR-poikkeuksen. Sen avulla voit muuten tarkistaa, onko tallennustilassasi vielä tilaa.

Kokeile ( localStorage.setItem("avain", "arvo"); ) catch (e) ( if (e == QUOTA_EXCEEDED_ERR) ( alert("Raja ylitetty"); ) )

Päätelmän sijaan

Haluaisin kehittäjien tekevän tästä lyhyestä artikkelista yksinkertaisen johtopäätöksen, että tätä tekniikkaa voidaan jo käyttää täysimääräisesti projekteissasi. Sillä on hyvä standardointi ja erinomainen tuki, joka kehittyy vain ajan myötä.

Verkkotallennustilan tarkistus

Internetissä tietoja voidaan tallentaa kahteen paikkaan: web-palvelimelle ja web-asiakkaalle (eli sivun vierailijan tietokoneelle). Tietyntyyppiset tiedot tallennetaan parhaiten yhteen näistä paikoista ja toiset toiseen.

Oikea paikka luottamuksellisten ja tärkeiden tietojen säilyttämiseen on verkkopalvelin. Jos esimerkiksi lisäät tuotteita ostoskoriin verkkokaupassa, tiedot mahdollisesta ostoksestasi tallennetaan verkkopalvelimelle. Vain muutaman tavun seurantatietoja, jotka sisältävät tietoja sinusta (tai pikemminkin tietokoneestasi), on tallennettu tietokoneellesi, jotta verkkopalvelin tietää, mikä ostoskori on sinun. Jopa HTML5:n uusilla ominaisuuksilla tätä järjestelmää ei tarvitse muuttaa – se on luotettava, turvallinen ja tehokas.

Mutta tietojen tallentaminen palvelimelle ei ole aina paras tapa, koska... Joskus on helpompaa tallentaa tarpeettomat tiedot käyttäjän tietokoneelle. On esimerkiksi järkevää tallentaa käyttäjän asetukset (esim. asetukset, jotka määrittävät verkkosivun renderöinnin) ja sovelluksen tilan (otos verkkosovelluksen nykyisestä tilasta) paikallisesti, jotta vierailija voi jatkaa sen suorittamista samasta kohdasta myöhemmin. .

Ennen HTML5:tä ainoa tapa tallentaa tietoja paikallisesti oli käyttää tiedostomekanismia keksit, joka oli alun perin suunniteltu vaihtamaan pieniä määriä tunnistetietoja verkkopalvelimien ja selainten välillä. Evästeet ovat ihanteellisia pienten tietomäärien tallentamiseen, mutta JavaScript-malli niiden kanssa työskentelemiseen on hieman kömpelö. Evästejärjestelmä pakottaa kehittäjän myös näpertämään vanhenemispäivämääriä ja lähettämään tietoja tarpeettomasti edestakaisin Internetin yli jokaisen sivupyynnön yhteydessä.

HTML5 tuo paremman vaihtoehdon evästeille, mikä tekee tietojen tallentamisesta vierailijan tietokoneelle helppoa ja yksinkertaista. Nämä tiedot voidaan tallentaa asiakkaan tietokoneelle loputtomiin, niitä ei lähetetä verkkopalvelimelle (ellei kehittäjä tee niin), ne voivat olla suuria ja vaativat vain muutaman yksinkertaisen, tehokkaan JavaScript-objektin käsittelemisen.

Tätä ominaisuutta kutsutaan verkkotallennustila ja sopii erityisen hyvin käytettäväksi offline-sivustojen kanssa, koska voit luoda itsenäisiä offline-sovelluksia, jotka voivat tallentaa kaikki tarvitsemansa tiedot, vaikka Internet-yhteyttä ei ole.

HTML5-verkkotallennustoiminnon avulla verkkosivu voi tallentaa tietoja vierailijan tietokoneelle. Nämä tiedot voivat olla lyhytaikaisia, jotka poistetaan, kun sammutat selaimen, tai pitkäaikaisia, jotka ovat saatavilla myöhemmillä vierailuilla verkkosivulla.

Verkkomuistiin tallennetut tiedot eivät itse asiassa tallennu Internetiin, vaan verkkosivun vierailijan tietokoneelle. Toisin sanoen verkkotallennus tarkoittaa tietojen tallentamista ei Internetiin, vaan tietojen tallentamista Internetistä.

Verkkotallennustilaa on kahta tyyppiä, jotka liittyvät jollakin tavalla kahteen objektiin:

Käyttää objektia paikallinen varasto tallentaa koko verkkosivuston tietoja pysyvästi. Tämä tarkoittaa, että jos verkkosivu tallentaa tietoja paikalliseen tallennustilaan, tiedot ovat käyttäjän käytettävissä, kun hän palaa tälle verkkosivulle seuraavana päivänä, ensi viikolla tai ensi vuonna.

Tietenkin useimmat selaimet tarjoavat käyttäjälle myös mahdollisuuden tyhjentää paikallista tallennustilaa. Jotkut selaimet käyttävät tätä kaikki tai ei mitään -strategiana ja poistavat kaikki paikalliset tiedot, aivan kuten evästeet. (Itse asiassa joissakin selaimissa evästejärjestelmä ja paikallinen tallennus on yhdistetty toisiinsa, joten ainoa tapa poistaa paikalliset tiedot on poistaa evästeet.) Ja muut selaimet voivat sallia käyttäjän tarkastella kunkin yksittäisen verkkosivuston tietoja ja poistaa tietoja valitun sivuston tai sivustot.

Käyttää objektia sessionStorage tietojen väliaikaiseen tallentamiseen yhteen selainikkunaan tai välilehteen. Nämä tiedot ovat käytettävissä vain, kunnes käyttäjä sulkee ikkunan tai välilehden, minkä jälkeen istunto päättyy ja tiedot poistetaan. Istuntotiedot kuitenkin säilytetään, jos käyttäjä siirtyy toiselle verkkosivustolle ja palaa sitten uudelleen, niin kauan kuin se tapahtuu samassa selainikkunassa.

Verkkosivun koodin näkökulmasta sekä paikallinen tallennus että istuntotietojen tallennus toimivat täsmälleen samalla tavalla. Ainoa ero on tietojen säilytyksen kesto.

Paikallisen tallennustilan käyttö tarjoaa parhaan mahdollisuuden tallentaa tarvittavat tiedot käyttäjän myöhempiä käyntejä varten verkkosivulla. Ja istuntomuistia käytetään tietojen tallentamiseen, jotka on siirrettävä sivulta toiselle. (Istunnon tallennus voi myös tallentaa väliaikaisia ​​tietoja, joita käytetään vain yhdellä sivulla, mutta tavalliset JavaScript-muuttujat toimivat hyvin tähän tarkoitukseen.)

Sekä paikallinen tallennustila että istunnon tallennus liittyy verkkosivuston verkkotunnukseen. Jos siis tallennat www..html-sivun tiedot paikalliseen tallennustilaan, nämä tiedot ovat saatavilla www..html-sivulle, koska molemmilla sivuilla on sama verkkotunnus. Nämä tiedot eivät kuitenkaan ole saatavilla muiden verkkotunnusten sivuille.

Lisäksi koska verkkotallennus sijaitsee tietyn käyttäjän tietokoneella (tai mobiililaitteella), se on liitetty kyseiseen tietokoneeseen, ja kyseisellä tietokoneella avatulla verkkosivulla, joka tallentaa tietoja sen paikalliseen tallennustilaan, ei ole pääsyä tietoihin, jotka se on tallentanut toiselle tietokoneelle . Samoin verkkosivu luo erillisen paikallisen tallennustilan, jos kirjaudut sisään toisella käyttäjätunnuksella tai käytät eri selainta.

Vaikka HTML5-spesifikaatiossa ei aseteta tiukkoja ja nopeita sääntöjä enimmäistallennustilalle, useimmat selaimet rajoittavat sen 5 megatavuun. Voit pakata tähän taltioon paljon dataa, mutta se ei riitä, jos haluat käyttää paikallista tallennustilaa suorituskyvyn optimointiin ja tallentaa siihen suuria määriä kuvia tai videoita välimuistiin (ja itse asiassa paikallista tallennustilaa ei ole suunniteltu sellaisiin tarkoituksiin).

Suurten tietomäärien tallentamiseen, edelleen kehittyvä tietokantastandardi Indeksoitu DB mahdollistaa paljon suurempien määrien paikallisen tallennustilan - yleensä 50 Mt aluksi ja enemmän, jos käyttäjä suostuu.

Tallennetaan tietoja

Ennen kuin tieto voidaan sijoittaa paikalliseen tai istuntomuistiin, sille on annettava kuvaava nimi. Tätä nimeä kutsutaan avaimeksi ja sitä tarvitaan, jotta tiedot voidaan hakea tulevaisuudessa.

Tiedon tallentamisen syntaksi on seuraava:

localStorage = data;

// JS localStorage["käyttäjänimi"] = "Ivan Petrov";

Staattisen tekstin fragmentin tallentaminen ei tietenkään ole järkevää. Tyypillisesti meidän on tallennettava jonkinlaisia ​​muuttuvia tietoja, kuten nykyinen päivämäärä, matemaattisen laskelman tulos tai käyttäjän syöttämä tekstitieto lomakekenttiin. Seuraavassa on esimerkki käyttäjän syöttämien tekstitietojen tallentamisesta:

Funktio saveData() ( // Hanki tekstikenttien arvot var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Tallenna syötetty teksti tekstikentässä paikalliseen tallennustilaan localStorage["localData"] = localData // Tallenna tekstikenttään syötetty teksti istunnon tallennustilaan varastointi var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"] // Näytä nämä tiedot tekstikentissä, jos (localData != null) ( document.getElementById("localData").value = localData; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = istuntotiedot; ) )

Sivu sisältää kaksi tekstikenttää: paikallista tallennustilaa varten (ylhäällä) ja istunnon tallennusta varten (alareunassa). "Tallenna"-painikkeen painaminen tallentaa tekstikenttiin syötetyn tekstin ja "Lataa"-painikkeen painaminen näyttää vastaavat tallennetut tiedot kenttiin.

Verkkotallennus tukee myös vähemmän yleistä ominaisuussyntaksia. Tämän syntaksin sääntöjen mukaan viittaamme tallennuspaikkaan nimeltä username nimellä localStorage.username eikä localStorage["käyttäjänimi"]. Molemmat syntaksityypit ovat samanarvoisia, ja toisen tai toisen käyttö on henkilökohtaista mieltymystä.

Verkkotallennus ei toimi ilman verkkopalvelinta

Verkkotallennustutkimuksessasi saatat kohdata odottamattoman ongelman. Monissa selaimissa verkkotallennus toimii vain verkkopalvelimen tarjoamilla sivuilla. Ei väliä missä palvelin sijaitsee, Internetissä tai omalla tietokoneellasi, tärkeintä on yksinkertaisesti, että sivuja ei käynnistetä paikalliselta kiintolevyltä (esimerkiksi kaksoisnapsauttamalla sivutiedoston kuvaketta).

Tämä ominaisuus on sivuvaikutus tavalle, jolla selaimet varaavat paikallista tallennustilaa. Kuten aiemmin todettiin, selaimet rajoittavat sivustokohtaista paikallista tallennustilaa 5 megatavuun, mikä edellyttää, että ne yhdistävät jokaisen sivun, joka haluaa käyttää paikallista tallennustilaa, verkkosivuston verkkotunnukseen.

Mitä tapahtuu, jos avaat sivun, joka käyttää verkkotallennustilaa paikalliselta kiintolevyltäsi? Kaikki riippuu selaimesta. Internet Explorer näyttää menettävän verkkotallennustuen kokonaan. LocalStorage- ja sessionStorage-objektit katoavat ja niiden käyttö aiheuttaa JavaScript-virheen.

Firefoxissa localStorage- ja sessionStorage-objektit pysyvät paikoillaan ja näyttävät olevan tuetut (jopa Modernizr määrittää, että niitä tuetaan), mutta kaikki, mikä lähetetään varastoon, katoaa Jumala tietää minne. Chrome-selain on taas jotain erilaista - suurin osa verkkotallennustoiminnoista toimii kuten pitääkin, mutta jotkin ominaisuudet (kuten onStorage-tapahtuma) eivät toimi.

Samanlaisia ​​ongelmia ilmenee käytettäessä File API:ta. Säästät siis itsesi monelta vaivalta, jos asetat testattavan sivun testipalvelimelle välttääksesi kaikki nämä epävarmuustekijät.

Selaintuki verkkotallennustilalle

Verkkotallennustila on yksi HTML5:n tuetuimmista ominaisuuksista, ja sen tuki on hyvä kaikissa tärkeimmissä selaimissa. Alla olevassa taulukossa näkyvät tärkeimpien verkkotallennustilaa tukevien selaimien vähimmäisversiot:

Kaikki nämä selaimet tarjoavat paikallista tallennus- ja istuntotietojen tallennusominaisuudet. OnStorage-tapahtuman tuki vaatii kuitenkin uudempia selaimen versioita, kuten IE 9, Firefox 4 tai Chrome 6.

Ongelmallisin versio on IE 7, joka ei tue verkkotallennustilaa ollenkaan. Kiertotavana voit emuloida verkkotallennustilaa evästeiden avulla. Se ei ole aivan täydellinen ratkaisu, mutta se toimii. Vaikka virallista skriptiä ei olekaan tämän aukon umpeen, hyviä lähtökohtia löytyy HTML5 Cross Browser -sivulta (kohdasta "Web Storage").

Tietojen tallentamisella suoraan selaimeen on monia etuja, joista tärkein on nopea ja verkosta riippumaton pääsy "tietokantaan". Tätä varten on tällä hetkellä 4 aktiivista menetelmää (plus yksi käytöstä poistettu):

1. Paikallinen varasto
2. Istunnon tallennus
3. Indeksoitu DB
4. WebSQL (vanhentunut)

Keksit

Evästeet ovat klassinen tapa tallentaa yksinkertaisia ​​merkkijonotietoja dokumenttiin. Tyypillisesti evästeet lähetetään palvelimelta asiakkaalle, joka voi tallentaa ne ja lähettää ne sitten takaisin palvelimelle vastauksena myöhempien pyyntöjen jälkeen. Tätä voidaan käyttää esimerkiksi tilin istuntojen hallintaan tai käyttäjätietojen seurantaan.

Lisäksi evästeitä voidaan käyttää yksinkertaisesti tietojen tallentamiseen asiakaspuolelle. Siksi niitä käytetään usein myös yleistietojen, kuten käyttäjäasetusten, tallentamiseen.

CRUD-perustoiminnot evästeillä

// Luo document.cookie = "user_name=Ire Aderinokun"; document.cookie = "käyttäjän_ikä=25;enimmäisikä=31536000;suojattu"; // Lue (kaikki) console.log(document.cookie); // Päivitä document.cookie = "user_age=24;max-age=31536000;secure"; // Poista document.cookie = "user_name=Ire Aderinokun;expires=To, 1. tammikuuta 1970 00:00:01 GMT";

Evästeiden edut

• Niitä voidaan käyttää kommunikointiin palvelimen kanssa
• Voimme asettaa evästeet vanhenemaan automaattisesti sen sijaan, että poistaisimme ne manuaalisesti.

Evästeiden haitat

• Ne lisätään asiakirjan sivun lataukseen
• Ne voivat tallentaa pienen määrän tietoa
• Ne voivat sisältää vain merkkijonoja.
• Mahdolliset turvallisuusongelmat.
• Tätä menetelmää ei ole suositeltu tietojen tallentamiseen asiakkaalle Web Storage API:n (paikallinen ja istuntotallennus) käyttöönoton jälkeen.

Selaimen tuki

Evästeillä on perustuki kaikissa yleisimmissä selaimissa.

Paikallinen varasto

Paikallinen tallennus on Web Storage API:n osajoukko, erityinen sovellusliittymä tietojen tallentamiseen selaimeen avainarvomuodossa. Tämä API luotiin ratkaisuksi evästeongelmiin, ja se on intuitiivisempi ja turvallisempi tapa tallentaa yksinkertaisia ​​tietoja selaimeen.

Vaikka teknisesti voimme tallentaa merkkijonoja vain paikalliseen tallennustilaan, tämä voidaan ratkaista muuttamalla JSON-muotoon. Tällä tavalla voimme tallentaa monimutkaisempaa tietoa paikalliseen tallennustilaan verrattuna evästeisiin.

CRUD-perustoiminnot paikallisella tallennustilalla

// Luo const user = ( nimi: "Ire Aderinokun", ikä: 25 ) localStorage.setItem("käyttäjä", JSON.stringify(user)); // Lue (yksi) console.log(JSON.parse(localStorage.getItem("user"))) // Päivitä const updatedUser = ( nimi: "Ire Aderinokun", ikä: 24 ) localStorage.setItem("user", JSON.stringify(päivitettyKäyttäjä)); // Poista localStorage.removeItem("user");

Paikallisen varastoinnin edut

• Tarjoaa yksinkertaisemman ja intuitiivisemman tiedontallennusliittymän.
• Turvallisempi tietojen tallentamiseen asiakkaalle.
• Voit tallentaa enemmän tietoja (kaikki 3 pistettä - verrattuna evästeisiin).

Paikallisen varastoinnin haitat

• Mahdollistaa vain merkkijonojen tallentamisen

Selaimen tuki

Istunnon tallennus

Istuntotallennus on Web Storage API:n toinen tyyppi. Se on täsmälleen sama kuin paikallinen tallennus, paitsi että tiedot tallennetaan vain selaimen välilehden istuntoa varten. Heti kun käyttäjä siirtyy pois sivulta ja sulkee selaimen, tiedot tyhjennetään.

CRUD-perustoiminnot istuntotallennustilalla

// Luo const user = ( nimi: "Ire Aderinokun", ikä: 25 ) sessionStorage.setItem("käyttäjä", JSON.stringify(user)); // Lue (yksi) console.log(JSON.parse(sessionStorage.getItem("user"))) // Päivitä const updatedUser = ( nimi: "Ire Aderinokun", ikä: 24 ) sessionStorage.setItem("user", JSON.stringify(päivitettyKäyttäjä)); // Poista sessionStorage.removeItem("user");

Edut, haitat ja tuki selaimissa ovat täsmälleen samat kuin paikallisessa tallennustilassa.

Indeksoitu DB

IndexedDB on paljon monimutkaisempi ja kypsempi ratkaisu tietojen tallentamiseen selaimeen, koska se on matalan tason API, jolla voidaan tallentaa merkittäviä määriä strukturoitua dataa asiakkaalle. Pohjimmiltaan se on JavaScriptiin perustuva oliotietokanta, jonka avulla voimme helposti tallentaa ja hakea avaimella indeksoituja tietoja.

WebSQL

WebSQL on asiakaspuolenmä, joka on samanlainen kuin SQLite. Vuodesta 2010 lähtien W3C-työryhmä lopetti työskentelyn tämän määrityksen parissa, eikä tämä API ole enää osa HTML-spesifikaatiota, eikä sitä pitäisi käyttää.

Tehtävälistasovelluksen luominen on yleensä ensimmäinen sovellus, jonka teet oppiessasi JavaScriptiä, mutta kaikkien näiden sovellusten ongelmana on, että kun lataat sivun uudelleen, kaikki luettelot katoavat.
On yksinkertainen ratkaisu - paikallisen tallennustilan käyttö. Paikallisen tallennustilan etuna on, että voit tallentaa dataa käyttäjän tietokoneelle, ja kun sivu ladataan uudelleen, kaikki tehtävälistat ovat edelleen siellä.

Mikä on paikallinen tallennustila?

Paikallinen tiedontallennus on osa tallennusverkkoa, joka itsessään on osa HTML5-spesifikaatiota. On kaksi vaihtoehtoa tietojen tallentamiseen eritelmiin:

• Paikallinen tallennus: Tallentaa tiedot ilman viimeistä käyttöpäivää, ja käytämme tätä vaihtoehtoa, koska haluamme tietojemme pysyvän sivulla mahdollisimman pitkään.
• Istunnon tallennus: Tallentaa tietoja vain yhdestä istunnosta, joten jos käyttäjä sulkee välilehden ja avaa sen uudelleen, kaikki hänen tietonsa menetetään.

Yksinkertaisesti sanottuna verkkotallennus tekee vain paikallisesti nimettyjen avain/arvo-parien tallentamisen, ja toisin kuin evästeet, nämä tiedot tallennetaan, vaikka suljet selaimesi tai sammutat tietokoneesi.

Jos ajattelemme tehtävälistaa, tarvitset seuraavat:

• Sisäänkäynti, jossa voit julkaista luettelomme
• Enter-painike lisätäksesi luettelon
• Painike tyhjentää koko päiväkirjan
• Järjestämätön luettelosäiliö, jossa luettelomme sijoitetaan elementtiluetteloon
• Ja lopuksi tarvitsemme DIV-säilön näyttääksemme ilmoituksen, kun yrität kirjoittaa tyhjän tehtävän.

Joten HTML-koodimme pitäisi näyttää suunnilleen tältä: