Vietinė saugykla html5 kaip išvalyti. Kliento pusės saugojimo įrankių apžvalga

Duomenų saugojimas tiesiai naršyklėje turi daug privalumų, iš kurių pagrindinis yra greita ir nuo tinklo nepriklausoma prieiga prie „duomenų bazės“. Įjungta Šis momentas Tam yra 4 aktyvūs metodai (ir vienas nebenaudojamas):

1. Vietinė parduotuvė
2. Seanso saugykla
3. IndexedDB
4. WebSQL (nebenaudojama)

Slapukai

Slapukai yra klasikinis būdas dokumente saugoti paprastus eilutės duomenis. Paprastai slapukai siunčiami iš serverio klientui, kuris gali juos saugoti ir išsiųsti atgal į serverį, atsakydamas į paskesnes užklausas. Tai gali būti naudojama tokiems dalykams kaip paskyros seansų valdymas arba naudotojo informacijos stebėjimas.

Be to, slapukai gali būti naudojami tiesiog duomenims saugoti kliento pusėje. Todėl jie taip pat dažnai naudojami bendriems duomenims, pvz., vartotojo nustatymams, saugoti.

Pagrindinės CRUD operacijos su slapukais

// Sukurti document.cookie = "user_name=Ire Aderinokun"; document.cookie = "naudotojo_amžius=25;maksimalus amžius=31536000;saugus"; // Skaityti (visus) console.log(document.cookie); // Atnaujinti document.cookie = "user_age=24;max-age=31536000;saugus"; // Ištrinti document.cookie = "user_name=Ire Aderinokun;expires=ketvirtadienis, 1970 m. sausio 1 d. 00:00:01 GMT";

Slapukų privalumai

• Jie gali būti naudojami bendrauti su serveriu
• Galime nustatyti, kad slapukai automatiškai pasibaigtų, o ne rankiniu būdu juos ištrintume.

Sausainių trūkumai

• Jie pridedami prie dokumento puslapio įkėlimo
• Jie gali saugoti nedidelį duomenų kiekį
• Juose gali būti tik eilutės.
• Galimos saugumo problemos.
• Šis metodas nebuvo rekomenduojamas duomenims kliente saugoti nuo tada, kai atsirado žiniatinklio saugyklos API (vietinė ir sesijos saugykla).

Naršyklės palaikymas

Slapukai turi pagrindinį palaikymą visose pagrindinėse naršyklėse.

Vietinė parduotuvė

Vietinė saugykla yra žiniatinklio saugyklos API, specialios API, skirtos duomenims saugoti naršyklėje rakto reikšmės formatu, poaibis. Ši API buvo sukurta kaip slapukų problemų sprendimas ir yra intuityvesnė ir saugiu būdu paprastų duomenų saugojimas naršyklėje.

Nors techniškai eilutes galime saugoti tik vietinėje saugykloje, tai įveikiama konvertuojant į JSON. Tokiu būdu vietinėje saugykloje galime saugoti sudėtingesnius duomenis, palyginti su slapukais.

Pagrindinės CRUD operacijos su vietine saugykla

// Sukurti const user = ( vardas: "Ire Aderinokun", amžius: 25 ) localStorage.setItem("vartotojas", JSON.stringify(user)); // Skaityti (vieną) console.log(JSON.parse(localStorage.getItem("user"))) // Atnaujinti const updatedUser = ( vardas: "Ire Aderinokun", amžius: 24 ) localStorage.setItem("user", JSON.stringify(atnaujintas naudotojas)); // Ištrinti localStorage.removeItem("user");

Vietinio saugojimo privalumai

• Siūlo paprastesnę ir intuityvesnę duomenų saugojimo sąsają.
• Saugesnis duomenų saugojimas kliente.
• Leidžia saugoti daugiau duomenų (visi 3 taškai – lyginant su slapukais).

Vietinio saugojimo trūkumai

• Leidžia saugoti tik eilutes

Naršyklės palaikymas

Seanso saugykla

Seanso saugykla yra antrasis Web Storage API tipas. Tai lygiai tokia pati kaip vietinė saugykla, išskyrus tai, kad duomenys saugomi tik naršyklės skirtuko seansui. Kai tik vartotojas išeina iš puslapio ir uždaro naršyklę, duomenys išvalomi.

Pagrindinės CRUD operacijos su seanso saugykla

// Sukurti const user = ( vardas: "Ire Aderinokun", amžius: 25 ) sessionStorage.setItem("vartotojas", JSON.stringify(user)); // Skaityti (vieną) console.log(JSON.parse(sessionStorage.getItem("user"))) // Atnaujinti const updatedUser = ( vardas: "Ire Aderinokun", amžius: 24 ) sessionStorage.setItem("user", JSON.stringify(atnaujintas naudotojas)); // Ištrinti sessionStorage.removeItem("user");

Naršyklės pranašumai, trūkumai ir palaikymas yra tokie patys kaip vietinės saugyklos.

IndexedDB

IndexedDB yra daug sudėtingesnis ir brandesnis sprendimas duomenims saugoti naršyklėje, nes tai žemo lygio API, skirta dideliems struktūrizuotų duomenų kiekiams saugoti kliente. Iš esmės tai yra į objektus orientuota duomenų bazė, pagrįsta „JavaScript“, leidžianti lengvai saugoti ir gauti duomenis, indeksuotus pagal raktą.

WebSQL

WebSQL yra kliento pusės reliacinė duomenų bazės API, panaši į SQLite. Nuo 2010 m darbo grupė W3C nutraukė darbą su šia specifikacija ir ši API nebėra HTML specifikacijos dalis ir neturėtų būti naudojama.

Interneto saugyklos apžvalga

Internete informacija gali būti saugoma dviejose vietose: žiniatinklio serveryje ir žiniatinklio kliente (t. y. puslapio lankytojo kompiuteryje). Tam tikrų tipų duomenis geriausia saugoti vienoje iš šių vietų, o kitų tipų – kitoje.

Tinkama vieta konfidencialių ir svarbių duomenų saugojimui yra žiniatinklio serveris. Pavyzdžiui, jei į pirkinių krepšelį įdedate prekių internetinėje parduotuvėje, duomenys apie galimą pirkinį yra saugomi žiniatinklio serveryje. Tik keli baitai stebėjimo duomenų, kuriuose yra informacijos apie jus (tiksliau, apie jūsų kompiuterį), yra saugomi jūsų kompiuteryje, kad žiniatinklio serveris žinotų, kuris krepšelis priklauso jūsų. Net ir naudojant naujas HTML5 funkcijas, šios sistemos keisti nereikia – ji patikima, saugi ir efektyvi.

Tačiau duomenų saugojimas serveryje ne visada yra geriausias būdas, nes... Kartais lengviau neesminę informaciją saugoti vartotojo kompiuteryje. Pavyzdžiui, tikslinga saugoti vartotojo nuostatas (tarkime, nustatymus, nurodančius, kaip tinklalapis pateikiamas) ir programos būseną (žiniatinklio programos dabartinės būsenos momentinę nuotrauką), kad vėliau lankytojas galėtų toliau ją paleisti iš to paties taško. .

Prieš HTML5, vienintelis būdas saugoti duomenis vietoje buvo naudoti failų mechanizmą sausainiai, kuris iš pradžių buvo skirtas keistis nedideliais identifikavimo informacijos kiekiais tarp žiniatinklio serverių ir naršyklių. Slapukai idealiai tinka nedideliems duomenų kiekiams saugoti, tačiau „JavaScript“ modelis darbui su jais yra šiek tiek nepatogus. Be to, slapukų sistema verčia kūrėją ieškoti galiojimo datų ir be reikalo siųsti duomenis internetu pirmyn ir atgal su kiekviena puslapio užklausa.

HTML5 pristato geresnę slapukų alternatyvą, kuri leidžia lengvai ir paprastai saugoti informaciją lankytojo kompiuteryje. Ši informacija gali būti saugoma kliento kompiuteris neribotą laiką, nėra siunčiamas į žiniatinklio serverį (nebent kūrėjas tai daro pats), gali būti didelio dydžio ir norint dirbti, reikia tik kelių paprastų, efektyvių JavaScript objektų.

Ši funkcija vadinama žiniatinklio saugykla ir ypač tinka naudoti su neprisijungus režimu interneto svetainių darbas, nes leidžia kurti savarankiškas neprisijungus veikiančias programas, kurios gali išsaugoti visą reikalingą informaciją net tada, kai nėra interneto ryšio.

HTML5 žiniatinklio saugyklos funkcija leidžia tinklalapiui saugoti duomenis lankytojo kompiuteryje. Ši informacija gali būti trumpalaikė, kuri ištrinama, kai išjungiate naršyklę, arba ilgalaikė, kuri lieka pasiekiama vėlesnio apsilankymo tinklalapyje metu.

Interneto saugykloje saugoma informacija faktiškai saugoma ne internete, o tinklalapio lankytojo kompiuteryje. Kitaip tariant, žiniatinklio saugykla reiškia duomenų saugojimą ne internete, o duomenų saugojimą iš interneto.

Yra dviejų tipų žiniatinklio saugykla, kuri kažkaip susieta su dviem objektais:

Vietinė parduotuvė

Naudoja objektą vietinė parduotuvė nuolat saugoti visos svetainės duomenis. Tai reiškia, kad jei tinklalapyje duomenys saugomi vietinėje saugykloje, tie duomenys bus prieinami vartotojui, kai jis grįš į tą tinklalapį kitą dieną, kitą savaitę ar kitais metais.

Žinoma, dauguma naršyklių taip pat suteikia vartotojui galimybę išvalyti vietinę saugyklą. Kai kurios naršyklės tai įgyvendina kaip „viskas arba nieko“ strategiją ir ištrina visus vietinius duomenis, panašiai kaip slapukai. (Tiesą sakant, kai kuriose naršyklėse slapukų sistema ir vietinė saugykla yra tarpusavyje susijusios, todėl vienintelis būdas ištrinti vietinius duomenis yra ištrinti slapukus.) O kitos naršyklės gali leisti vartotojui peržiūrėti kiekvienos atskiros svetainės duomenis ir ištrinti duomenis pasirinktą svetainę ar svetaines.

Seanso duomenų saugojimas

Naudoja objektą sessionStorage laikinai saugoti vieno naršyklės lango ar skirtuko duomenis. Šie duomenys pasiekiami tik tol, kol vartotojas uždaro langą arba skirtuką, po kurio sesija baigiasi ir duomenys ištrinami. Tačiau seanso duomenys išsaugomi, jei vartotojas apsilanko kitoje svetainėje ir vėl grįžta, kol tai vyksta tame pačiame naršyklės lange.

Tinklalapio kodo požiūriu vietinė saugykla ir seanso duomenų saugykla veikia lygiai taip pat. Vienintelis skirtumas yra duomenų saugojimo trukmė.

Naudojant vietinę saugyklą suteikiama geriausia galimybė išsaugoti reikiamą informaciją, kad vartotojas vėliau apsilankytų tinklalapyje. O seansų saugykla naudojama duomenims, kuriuos reikia perkelti iš vieno puslapio į kitą, saugoti. (Seanso saugykloje taip pat galima saugoti laikinus duomenis, kurie naudojami tik viename puslapyje, tačiau įprasti „JavaScript“ kintamieji puikiai tinka šiam tikslui.)

Tiek vietinė, tiek seanso saugykla yra susietos su svetainės domenu. Taigi, jei išsaugosite www..html puslapio duomenis vietinėje saugykloje, šie duomenys bus pasiekiami www..html puslapyje, nes abu šie puslapiai turi tą patį domeną. Tačiau šie duomenys nebus pasiekiami kitų domenų puslapiuose.

Be to, nes žiniatinklio saugykla yra jūsų kompiuteryje (arba mobilusis įrenginys) duotas vartotojas, jis susietas su šiuo kompiuteriu, o tinklalapis atidarytas šį kompiuterį ir saugodama duomenis savo vietinėje saugykloje, neturi prieigos prie informacijos, kurią išsaugojo kitame kompiuteryje. Taip pat tinklalapyje sukuriama atskira vietinė saugykla, jei prisijungiate naudodami kitą vartotojo vardą arba naudojate kitą naršyklę.

Nors HTML5 specifikacija nenustato jokių griežtų ir greitų maksimalios saugyklos taisyklių, dauguma naršyklių ją riboja iki 5 MB. Į šį tomą galite sutalpinti daug duomenų, bet to nepakaks, jei norite naudoti vietinę saugyklą našumui optimizuoti ir talpykloje laikyti didelius vaizdų ar vaizdo įrašų kiekius (ir, tiesą sakant, vietinė saugykla nėra skirta tokiems tikslams).

Dideliam duomenų kiekiui saugoti – vis dar tobulinamas duomenų bazės standartas IndexedDB leidžia lokaliai saugoti daug didesnius kiekius – paprastai pradžioje 50 MB ir daugiau, jei vartotojas sutinka.

Duomenų išsaugojimas

Prieš įtraukiant informaciją į vietinę arba seanso saugyklą, jai turi būti suteiktas aprašomasis pavadinimas. Šis pavadinimas vadinamas raktu ir reikalingas tam, kad ateityje būtų galima gauti duomenis.

Duomenų dalies išsaugojimo sintaksė yra tokia:

localStorage = duomenys;

// JS localStorage["naudotojo vardas"] = "Ivanas Petrovas";

Žinoma, išsaugoti statinio teksto fragmentą nėra prasmės. Pavyzdžiui, paprastai turime saugoti kai kuriuos kintamus duomenis dabartinė data, matematinio skaičiavimo rezultatas arba tekstiniai duomenys, kuriuos vartotojas įvedė į formos laukus. Toliau pateikiamas vartotojo įvestų tekstinių duomenų išsaugojimo pavyzdys:

Interneto saugykla

Šis tekstas bus išsaugotas vietinėje saugykloje:
Šis tekstas bus išsaugotas seanso duomenų saugykloje:

Funkcija saveData() ( // Gaukite teksto laukų reikšmes var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Išsaugokite įvestą tekstą teksto lauke į vietinę saugyklą localStorage["localData"] = localData; // Išsaugokite teksto lauke įvestą tekstą seanso saugykloje sessionStorage["sessionData"] = sessionData; ) funkcija loadData() ( // Įkelti išsaugotus duomenis iš saugyklos var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Rodyti šiuos duomenis teksto laukuose if (localData != null) ( document.getElementById("localData").value = localData ; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Puslapyje yra du teksto laukai: vietinei saugyklai (viršuje) ir seanso saugyklai (apačioje). Paspaudus mygtuką „Išsaugoti“, išsaugomas teksto laukuose įvestas tekstas, o paspaudus mygtuką „Įkelti“, laukeliuose rodomi atitinkami įrašyti duomenys.

Žiniatinklio saugykla taip pat palaiko mažiau paplitusią nuosavybės sintaksę. Pagal šios sintaksės taisykles saugojimo vietą, pavadintą vartotojo vardu, vadiname vietineStorage.username, o ne localStorage["naudotojo vardas"]. Abu sintaksės tipai yra lygiaverčiai, o vienos ar kitos naudojimas yra asmeninio pasirinkimo reikalas.

Žiniatinklio saugykla neveikia be žiniatinklio serverio

Tirdami žiniatinklio saugyklą galite susidurti su netikėta problema. Daugelyje naršyklių žiniatinklio saugykla veikia tik žiniatinklio serverio teikiamuose puslapiuose. Nesvarbu, kur yra serveris, internete ar jūsų nuosavas kompiuteris, svarbiausia tik neleisti puslapiams paleisti iš vietinių kietasis diskas(Pavyzdžiui, dukart spustelėkite pagal puslapio failo piktogramą).

Ši funkcija yra šalutinis poveikis kaip naršyklės paskirsto vietinę saugyklą. Kaip minėta anksčiau, naršyklės riboja vienos svetainės vietinę saugyklą iki 5 MB, todėl kiekvieną puslapį, kuris nori naudoti vietinę saugyklą, reikia susieti su svetainės domenu.

Taigi, kas atsitiks, jei atidarysite puslapį, kuriame naudojama žiniatinklio saugykla iš vietinio standžiojo disko? Viskas priklauso nuo naršyklės. Interneto naršyklė Atrodo, kad „Explorer“ visiškai praranda žiniatinklio saugyklos palaikymą. LocalStorage ir sessionStorage objektai išnyksta ir bandymas juos naudoti sukelia JavaScript klaidą.

IN Firefox naršyklė localStorage ir sessionStorage objektai lieka savo vietose ir atrodo palaikomi (net Modernizr nustato, kad jie palaikomi), bet viskas, kas siunčiama į saugyklą, dingsta Dievas žino kur. IN Chrome naršyklė vėl kažkas kitokio – dauguma žiniatinklio saugyklos funkcijų veikia taip, kaip turėtų, bet kai kurios galimybės (pvz., įvykis onStorage) neveikia.

Panašios problemos kyla naudojant failų API. Taigi sutaupysite daug rūpesčių, jei bandomą puslapį įdėsite į bandomąjį serverį, kad išvengtumėte visų tų netikrumų.

Naršyklės palaikymas žiniatinklio saugyklai

Žiniatinklio saugykla yra viena iš labiausiai palaikomų HTML5 funkcijų, kurią palaiko visos pagrindinės naršyklės. Žemiau esančioje lentelėje parodytos minimalios pagrindinių naršyklių, palaikančių žiniatinklio saugyklą, versijos:

Visos šios naršyklės suteikia vietinės saugojimo ir seanso duomenų saugojimo galimybes. Tačiau „onStorage“ įvykio palaikymui reikalingos naujesnės versijos naršyklės, pvz., IE 9, Firefox 4 arba Chrome 6.

Problemiškiausia versija yra IE 7, kuri visiškai nepalaiko žiniatinklio saugyklos. Kaip išeitis, galite emuliuoti žiniatinklio saugyklą naudodami slapukus. Tai tikrai ne tobulas sprendimas, bet veikia. Nors nėra oficialaus scenarijaus, kaip užpildyti šią spragą, keletą gerų pradžios taškų galite rasti HTML5 kryžminės naršyklės puslapyje (skiltyje „Žiniatinklio saugykla“).

Sveiki visi! Šiame straipsnyje mes apžvelgsime kas yra „localStorage“ ir kaip ja naudotis.

Įvadas

Vietinė parduotuvė- vietinė parduotuvė. Tie. tai yra specialiai skirta vieta naršyklėje (kažkas panašaus į mažą duomenų bazę), kur galime rašyti, skaityti ir ištrinti kai kuriuos duomenis. Tiesą sakant, vietinė saugykla yra labai panaši į SLAPUKAS, bet yra skirtumų. Taigi pakalbėkime apie juos. Slapukas labai ribotas. Vienas sausainis gal tik 4096 simbolių, o jų skaičius viename domene yra apytikslis 30-50 priklausomai nuo naršyklės. Vietinėje saugykloje galime laikyti 5-10 mb ar net ilgiau ilgą laiką.

Kur juos panaudoti

Didžiausias skirtumas sausainis iš vietinė parduotuvė- tai yra, kad pirmasis veikia su serveriu, o antrasis ne, nors tai irgi galima padaryti, bet apie tai šiek tiek vėliau. Naudokite vietinė parduotuvė kur nereikia glaudaus darbo su serveriu, bet reikia saugoti laikinus duomenis. Pavyzdžiui, įsivaizduokime, kad kuriate kokią nors žiniatinklio programą, kur žmogus gali eiti, įvesti kelias užduotis, kurias jis nori atlikti per dieną, ir ištrinti tas, kurias jau atliko. Kam čia reikalingas serveris? Teisingai, be priežasties. Čia jis turėtų būti naudojamas vietinė parduotuvė. Žmogus ateina, įveda užduotis, jos įrašomos į specialią vietą jo naršyklėje ir ten išsaugomos. Kai asmuo vėl prisijungs po kurio laiko, jis bus pasirinktas ir rodomas iš ten. Pavyzdžiui, spustelėjus užduotį, ji bus ištrinta vietinė parduotuvė ir todėl jam nebebus rodomas. Pereikime prie to, kaip jį naudoti.

Kaip naudoti vietinę saugyklą

Duomenys saugomi taip pat, kaip ir sausainis - raktas: vertė. Norėdami pridėti naują vertę, parašykite tai:

LocalStorage.setItem("raktas", "vertė");

Mes naudojame localStorage objektas ir jo metodas setItem, kur perduodame raktą ir vertę.

Norėdami gauti duomenis, parašykite taip:

Var reikšmė = localStorage.getItem("raktas");

Dėl to į kintamąjį vertė gaus reikšmę, saugomą po raktu, kurį perduodame metodui getItem.

Duomenų trynimas

LocalStorage("raktas"); // ištrins duomenis pagal perduotą raktą
localStorage.clear(); // visiškai išvalyti vietinę saugyklą

Norėdami patikrinti, ar vietinė saugykla pilna, galite naudoti konstantą QUOTA_EXCEEDED_ERR

Bandyti(
localStorage.setItem("raktas", "vertė");
) sugauti (e) (
if (e == QUOTA_EXCEEDED_ERR) (
įspėjimas ("Limitas viršytas");
}
}

Tai viskas, ką jums reikia žinoti vietinė parduotuvė. Verta pasakyti, kad be šio objekto yra dar vienas - sessionStorage. Jis skiriasi tik tuo, kad saugo tik vieno skirtuko duomenis ir bus ištrintas, kai tik vartotojas uždarys skirtuką.

Straipsnio pradžioje aš tai sakiau vietinė parduotuvė sukurta siekiant saugoti vietinius duomenis ir nebendrauti su serveriu, tačiau vis dėlto tokią galimybę turime. Manau, kad kai kurie jau atspėjo, kaip tai padaryti. Taigi, jei jums reikia nusiųsti kai kuriuos duomenis į serverį, atlikite šiuos veiksmus: gaukite duomenis iš vietinės saugyklos, konvertuokite į JSON surišti ir siųsti naudojant technologijas Ajax. Taip pat galite juos gauti iš serverio.

Apatinė eilutė

Taigi naudokite vietinė parduotuvė kur nereikia bendrauti su serveriu, o duomenis reikia saugoti lokaliai, vartotojo naršyklėje. Šiame straipsnyje aptarėme viską, ko jums reikia. Dėkojame už dėmesį ir iki greito pasimatymo!

Labai dažnai pirmoji JavaScript programa yra Todo sąrašas, tačiau tokių programų problema yra ta, kad atnaujinus puslapį visi sąrašo elementai išnyksta.

Paprastas šios problemos sprendimas yra naudoti vietinė parduotuvė(Vietinė parduotuvė). Vietinė saugykla leidžia saugoti duomenis vartotojo įrenginyje ir atnaujinę puslapį galite lengvai iš jo atsisiųsti sąrašą. Šiame straipsnyje parašysime nedidelį darbų sąrašą naudodami vietinę saugyklą.

Kas yra vietinė saugykla?

Vietinė saugykla („žiniatinklio saugykla“) iš pradžių buvo HTML5 specifikacijos dalis, bet dabar perkelta į savo. Yra du būdai saugoti duomenis:

• Vietinė parduotuvė: nuolatinė saugykla, tai mes naudosime.
• Seanso saugykla: saugo tik šios sesijos duomenis, vartotojui uždarius puslapį, duomenys bus prarasti.

Vietinė saugykla leidžia saugoti duomenis raktų-reikšmių porų pavidalu vartotojo kompiuteryje ir šie duomenys bus pasiekiami net uždarius naršyklę ar išjungus kompiuterį.

HTML

Norėdami sudaryti darbų sąrašą, mums reikia:

• Teksto įvestis elemento turiniui įvesti.
• Mygtukas, skirtas įtraukti elementą į sąrašą.
• Mygtukas sąrašui išvalyti.
• Pats sąrašas (
  ).
  • Ir papildomas div, kad parodytų klaidas.

  Taigi HTML žymėjimas atrodys taip:

  Išvalyti viską

  Gana paprasta struktūra, kurią atgaivinsime naudodami „JavaScript“.

  Nes naudojame jQuery, reikia jį papildomai prijungti.

  JavaScript

  Pirmiausia turime stebėti pridėjimo mygtuko paspaudimą ir patikrinti, ar įvesties laukas nėra tuščias:

  $("#add").click(function() ( var Aprašymas = $("#aprašymas").val(); if($("#description").val() == "") ( $( "#alert").html(" Įspėjimas! Užduotį palikote tuščią"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )

  Šis kodas patikrina teksto įvesties reikšmę ir, jei jis tuščias, parodo klaidą ir grąžina false, kad likusi kodo dalis nebūtų vykdoma ir elementas nebūtų įtrauktas į sąrašą.

  // įterpti įrašą $("#todos").prepend("

  „+Aprašymas+“

  "); // ištrinti viską, kas liko teksto lauke $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos ); grąžinti klaidingą; ));

  Norėdami dirbti su vietine saugykla, turite pateikti raktą ir atitinkamą jo reikšmę. Mūsų atveju pavadinkime raktą „todos“ ir reikšmė bus visas HTML kodas, esantis sąraše (žymoje

  ). Šį kodą lengva gauti naudojant jQuery. Galiausiai grąžiname false, kad nebūtų pateikta forma ir nebūtų įkeltas puslapis iš naujo.

  Kitas žingsnis yra patikrinti vietinę saugyklą, jei yra reikšmė su raktu „todos“, tada įkelkite sąrašą iš vietinės saugyklos:

  If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )

  Nes gatavą HTML išsaugome saugykloje, tada tiesiog įterpiame šį kodą į sąrašą.

  Mūsų darbų sąrašas beveik paruoštas, belieka įdiegti sąrašo valymo funkciją. Kai vartotojas spustelėja mygtuką, visas sąrašas bus ištrintas ir vietinė saugykla bus išvalyta:

  $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));

  Pasiruošę! Visas kodas atrodo taip:

  $(document).ready(function() ( $("#add").click(function() ( var Aprašymas = $("#aprašas").val(); if ($("#aprašymas"). val() == "") ( $("#alert").html(" Įspėjimas! Užduotį palikote tuščią"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("

  • „+Aprašymas+“
  "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); if (localStorage .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( ); location.reload(); return false; )); ));

  Naršyklės palaikymas

  Interneto saugyklą palaiko visos pagrindinės naršyklės, net IE8. Turėtumėte saugotis tik IE7 ir senesnės versijos.

  Išvada

  Vietinė saugykla tokiose mažose programose gali būti puikus duomenų bazės pakaitalas. Nedidelį informacijos kiekį saugoti neturėtų būti sunku.