Hiki ni kiolezo cha HTML cha kawaida kabisa ambacho tunaweza kujaza na maudhui yanayozalishwa kwa nguvu kwa kutumia JavaScript.

JavaScript

Kwa kuzingatia muundo wa programu rahisi ya notepad katika mfano wetu, jambo la kwanza tunalohitaji kufanya ni kutoa ufuatiliaji wa tukio la kubofya kitufe. "Ongeza dokezo" na angalia ikiwa taarifa yoyote imeingizwa kwenye uwanja wa maandishi kwa ajili ya kuingia, yaani, wakati kifungo kinasisitizwa, haipaswi kuwa tupu. Kitu kama hiki:

$("#ongeza").bofya(kazi() (
// ikiwa uga wa maandishi hauna kitu
$("#tahadhari").html(" Makini! Ingiza ingizo katika maandishi
shamba.");
kurudi kwa uwongo;
}

Hivi ndivyo tunavyofanya na kipande hiki cha nambari. Wakati kifungo ni taabu "Ongeza dokezo" tunaangalia ili kuona ikiwa mtumiaji ameingiza chochote kwenye uwanja mpya wa ingizo. Ikiwa hakufanya hivi, basi div tuliyotoa kwa ajili ya kuonyesha ujumbe inaonekana, ikimfahamisha mtumiaji kwamba uwanja wa kuingia haujajazwa na kisha, baada ya 1000ms (sekunde 1), kipengele cha div, na ipasavyo ujumbe, kutoweka. Chaguo za kukokotoa hurejesha false , kisha kivinjari huacha kutekeleza hati iliyosalia na programu iko tayari tena kuingiza ingizo jipya.

Hatua yetu inayofuata itakuwa kuongeza thamani iliyoingizwa kwenye uwanja wa ingizo hadi mwanzo wa orodha kwa kutoa kipengee kipya cha orodha. Kwa hivyo, wakati mtumiaji anaongeza kiingilio kingine, kitawekwa kila wakati mwanzoni mwa orodha ya mambo ya kufanya na matukio yanayotarajiwa. Baada ya hayo, tunachopaswa kufanya ni kuhifadhi orodha kwa kutumia utaratibu wa Uhifadhi wa ndani:

// Ongeza kiingilio kwenye orodha iliyopo
$("#todos").prepend("

Kama unaweza kuwa umegundua, hakuna kitu cha kawaida hapa, toleo la kawaida la nambari ya jQuery hutumiwa. Tunapofikia kipengee cha Hifadhi ya ndani, lazima tubainishe data tunayohifadhi katika ufunguo/umbo la thamani. Unaweza kutumia jina la kiholela kwa ufunguo, na nikaliita "todos", basi tunahitaji kuonyesha kile tunachohitaji kuhifadhi kwenye kumbukumbu. Katika kesi hii, ni kipande kamili cha markup ya HTML iliyojumuishwa katika orodha isiyopangwa (iko kati ya vitambulisho), kwa msaada ambao maingizo yote yaliyoingia hapo awali na mtumiaji yanaonyeshwa. Kutoka kwa msimbo unaweza kuona kwamba tunapata tu kipande tunachohitaji kwa kutumia njia ya jQuery .html() na mwisho, baada ya kukamilisha vitendo vyote muhimu, tunaweka thamani ya kurudi ya kazi kwa uongo , ambayo inazuia data ya fomu. kutoka kwa kuwasilishwa na, kwa hivyo, kupakia upya ukurasa wetu.

Sasa, wacha tuseme mtumiaji wetu amefanya maingizo kadhaa hapo awali, na kwa operesheni zaidi ya kawaida ya programu, tunahitaji kuangalia ikiwa Hifadhi ya ndani ina habari iliyohifadhiwa hapo awali kwenye kompyuta na, ikiwa ni hivyo, ionyeshe kwa mtumiaji. Kwa kuwa jina letu kuu ni "todos", tunapaswa kuangalia uwepo wake kama hii:

// ikiwa tayari kuna data katika hifadhi ya ndani, basi ionyeshe

}

Ili kuangalia upatikanaji wa data, tulitumia taarifa ya kawaida ikiwa na, ikiwa sharti tulilobainisha lilitimizwa, tulipata tu data yote kutoka kwenye hifadhi ya ndani, tukiiweka kama alama ya HTML ndani ya orodha isiyopangwa, ambayo inaonyesha maingizo yaliyoingizwa hapo awali. mtumiaji.

Ukiangalia uendeshaji wa programu yako rahisi, utapata kwamba baada ya kupakia upya ukurasa kila kitu kinabaki mahali. Na sasa, jambo la mwisho tunalohitaji kufanya ni kuunda kazi ambayo mtumiaji, ikiwa ni lazima, angeweza kufuta maingizo yake yote. Hii inatekelezwa kwa kufuta Hifadhi ya ndani na kupakia upya ukurasa ili kuwezesha mabadiliko yaliyofanywa. Kisha, sisi, kama katika kisa cha awali, tunaweka sivyo kama thamani ya kurejesha kipengele cha kukokotoa, ambayo huzuia heshi isionekane kwenye URL. ( *na haisongi juu ya ukurasa.):

// Usafishaji kamili wa Hifadhi ya ndani
window.localStorage.clear();
location.reload();
kurudi kwa uwongo;
});

Kama matokeo, tunayo programu inayofanya kazi kikamilifu. Na kuweka vipande vyote hapo juu, tunapata nambari kamili ya maombi:

$("#ongeza").bofya(kazi() (
var Maelezo = $("#maelezo").val();
if($("#description").val() == "") (
$("#tahadhari").html(" Makini! Ingiza kiingilio
uwanja wa maandishi.");
$("#tahadhari").fadeIn().chelewa(1000).fadeOut();
kurudi kwa uwongo;
}
$("#todos").prepend("

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

$("#clear").bofya(kazi() (
window.localStorage.clear();
location.reload();
kurudi kwa uwongo;
});

Usaidizi wa kivinjari.

Uainishaji wa HTML5 hutoa msaada wa nguvu kabisa kwa teknolojia ya Hifadhi ya Wavuti, kwa sababu ambayo inatekelezwa pia na vivinjari maarufu, hata IE8. Tatizo pekee linasalia IE7, ikiwa bado una nia.

Hitimisho.

Katika programu ndogo kama hizi, utaratibu wa Uhifadhi wa ndani unaweza kuchukua nafasi ya utumiaji wa hifadhidata kwa mafanikio. Ili kuhifadhi kiasi kidogo cha data, si lazima kutumia mbadala ngumu zaidi.

* Ujumbe wa mtafsiri.

Maoni ya Chapisho: 475

Nilikutumia makala yenye hadithi kuhusu HTML5 LocalStorage katika vivinjari. Tunampa sakafu.

Nilijaribu kuandika mwongozo rahisi na unaoeleweka zaidi wa kutumia teknolojia ya Uhifadhi wa ndani. Nakala hiyo iligeuka kuwa fupi kabisa, kwa sababu ya ukweli kwamba teknolojia yenyewe na njia za kufanya kazi nayo sio ngumu. Ili kuanza, unahitaji tu kujua JavaScript kidogo. Kwa hiyo, tumia dakika 10 kwenye makala hii na unaweza kuongeza kwa usalama mstari "Ninaweza kufanya kazi na Hifadhi ya ndani" kwenye resume yako.

LocalStore ni nini?

Hivi ndivyo kitu cha JavaScript kinavyoonekana:

Var myCar = ( magurudumu: 4, milango: 4, injini: 1, jina: "Jaguar")

Na hivi ndivyo JSON inavyoonekana. Karibu sawa na kitu cha kawaida cha js, ni mali zote tu lazima ziambatanishwe katika nukuu.

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

Ili kuelewa LocalStore ni nini, hebu fikiria kuwa una kitu kama hicho kilichojengwa kwenye kivinjari chako mahali fulani ambacho tunaweza kutumia. Wakati huo huo, kitu hiki hakiondoi maadili ambayo tunaandika hapo ikiwa tunapakia tena ukurasa au hata kufunga kivinjari kabisa.

Kwa maneno ya JavaScript, LocalStorage ni mali ya kitu cha kivinjari cha kimataifa (dirisha). Inaweza kufikiwa kama window.localStorage au tu LocalStorage.

Inafaa pia kusema kuwa kivinjari kina clone ya ndani ya Hifadhi inayoitwa sessionStorage. Tofauti yao pekee ni kwamba mwisho huhifadhi data kwa tabo moja tu (kikao) na itafuta nafasi yake mara tu tunapofunga kichupo.

Hebu tuangalie live. Kwa mfano, katika Google Chrome unahitaji kufungua DevTools (F12), nenda kwenye kichupo cha "Rasilimali" na kwenye kidirisha cha kushoto utaona Hifadhi ya ndani ya kikoa hiki na maadili yote yaliyomo.

Kwa njia, unapaswa kujua jinsi Hifadhi ya ndani inavyofanya kazi na vikoa. Kwa kila kikoa, kivinjari chako huunda kipengee chake cha ndani cha Hifadhi, na kinaweza tu kuhaririwa au kutazamwa kwenye kikoa hicho. Kwa mfano, kikoa cha mydomain-1.com hakiwezi kufikia Hifadhi ya ndani ya mydomain-2.com yako .

Kwa nini ninahitaji Hifadhi ya ndani?

LocalStorage inahitajika kwa jambo moja tu - kuhifadhi data fulani kati ya vipindi vya mtumiaji. Unaweza kufikiria mambo elfu moja ambayo yanaweza kuhifadhiwa katika hifadhi ya ndani ya kivinjari. Kwa mfano, michezo ya kivinjari inayoitumia kama faili ya kuhifadhi, au rekodi wakati ambapo mtumiaji aliacha kutazama video, data mbalimbali za fomu, n.k.

Je, nitaanzaje kutumia LocalStore?

Rahisi sana.

Kufanya kazi na LocalStorage ni sawa na kufanya kazi na vitu kwenye JavaScript. Kuna njia kadhaa za kufanya kazi nayo.

localStorage.setItem("ufunguo", "thamani")

Njia inayoongeza ufunguo mpya wenye thamani kwenye Uhifadhi wa ndani (na ikiwa ufunguo kama huo tayari upo, huibatilisha kwa thamani mpya). Tunaandika, kwa mfano, localStorage.setItem('myKey', 'myValue');

localStorage.getItem("ufunguo")

Tunachukua thamani maalum kutoka kwa hifadhi muhimu.

localStorage.removeItem("Ufunguo")

Kuondoa ufunguo

localStorage.clear()

Inafuta hifadhi yote

Sasa unaweza kufungua kichupo cha Uhifadhi wa ndani kwenye kivinjari chako na ufanye mazoezi ya kurekodi na kurejesha data kutoka kwa hifadhi hii wewe mwenyewe. Ikiwa chochote kitatokea, tunaandika nambari zote kwenye faili ya js.

//Ongeza au ubadilishe thamani: localStorage.setItem("myKey", "myValue"); //sasa unayo kitufe cha "myKey" chenye thamani "myValue" iliyohifadhiwa kwenye Uhifadhi wa ndani //Itoe kwa koni: var localValue = localStorage.getItem("myKey"); console.log(Thamani ya ndani); //"MyValue" //remove: localStorage.removeItem("myKey"); //safisha hifadhi nzima localStorage.clear() Kitu kimoja, na mabano ya mraba pekee: localStorage["Key"] = "Thamani" //setting thamani localStorage["Key"] //Kupata thamani futa localStorage[" Ufunguo"] // Ondoa thamani

Ningependa pia kutambua kuwa LocalStorage inafanya kazi vizuri na miundo iliyowekwa kiota, kwa mfano, vitu.

//tengeneza kitu var obj = ( item1: 1, item2: , item3:"hello" ); var serialObj = JSON.stringify(obj); //serialize localStorage.setItem("myKey", serialObj); // iandike kwenye hifadhi kwa kutumia kitufe cha "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //ichanganue tena kama kitu

Unapaswa pia kujua kuwa vivinjari vinatenga 5MB kwa Hifadhi ya ndani. Na ukizidisha, utapokea QUOTA_EXCEEDED_ERR zisizofuata kanuni. Kwa njia, unaweza kuitumia kuangalia ikiwa bado kuna nafasi katika hifadhi yako.

Jaribu ( localStorage.setItem("key", "value"); ) kamata (e) ( ikiwa (e == QUOTA_EXCEEDED_ERR) ( tahadhari("Kikomo kimezidi"); ) )

Badala ya hitimisho

Ningependa watengenezaji kuteka hitimisho rahisi kutoka kwa makala hii fupi kwamba teknolojia hii inaweza tayari kutumika kikamilifu kwenye miradi yako. Ina viwango vyema na usaidizi bora, ambao huendelea tu kwa muda.

Ukaguzi wa Hifadhi ya Wavuti

Kwenye mtandao, habari inaweza kuhifadhiwa katika sehemu mbili: kwenye seva ya wavuti na kwenye mteja wa wavuti (yaani, kompyuta ya mgeni wa ukurasa). Aina fulani za data huhifadhiwa vyema katika mojawapo ya maeneo haya, na aina nyingine mahali pengine.

Mahali sahihi pa kuhifadhi data za siri na muhimu ni seva ya wavuti. Kwa mfano, ukiongeza bidhaa kwenye kikapu chako cha ununuzi kwenye duka la mtandaoni, data kuhusu uwezo wako wa kununua huhifadhiwa kwenye seva ya wavuti. Ni baiti chache tu za data ya kufuatilia iliyo na habari kukuhusu (au tuseme, kuhusu kompyuta yako) huhifadhiwa kwenye kompyuta yako ili seva ya wavuti ijue ni rukwama gani ni yako. Hata kwa vipengele vipya vya HTML5, hakuna haja ya kubadilisha mfumo huu - ni wa kuaminika, salama na ufanisi.

Lakini kuhifadhi data kwenye seva sio njia bora kila wakati, kwa sababu ... Wakati mwingine ni rahisi kuhifadhi habari zisizo muhimu kwenye kompyuta ya mtumiaji. Kwa mfano, inaleta maana kuhifadhi mapendeleo ya mtumiaji (sema, mipangilio inayobainisha jinsi ukurasa wa wavuti unavyotolewa) na hali ya programu (picha ya hali ya sasa ya programu ya wavuti) ndani ili mgeni aendelee kuiendesha kutoka hatua sawa baadaye. .

Kabla ya HTML5, njia pekee ya kuhifadhi data ndani ya nchi ilikuwa kutumia utaratibu wa faili vidakuzi, ambayo awali iliundwa ili kubadilishana kiasi kidogo cha taarifa za kutambua kati ya seva za wavuti na vivinjari. Vidakuzi ni bora kwa kuhifadhi kiasi kidogo cha data, lakini muundo wa JavaScript wa kufanya kazi nao ni wa kusuasua kidogo. Mfumo wa vidakuzi pia humlazimisha msanidi programu kuhangaika na tarehe za mwisho wa matumizi na kutuma data bila sababu na kurudi kwenye Mtandao kwa kila ombi la ukurasa.

HTML5 inatanguliza mbadala bora wa vidakuzi, ambayo hurahisisha na rahisi kuhifadhi taarifa kwenye kompyuta ya mgeni. Taarifa hizi zinaweza kuhifadhiwa kwenye kompyuta ya mteja kwa muda usiojulikana, hazitumwi kwa seva ya wavuti (isipokuwa kama msanidi afanye hivyo), zinaweza kuwa kubwa kwa ukubwa, na zinahitaji vitu vichache tu vya JavaScript vilivyo rahisi kudhibiti.

Kipengele hiki kinaitwa uhifadhi wa wavuti na inafaa haswa kwa matumizi na tovuti za nje ya mtandao, kwa sababu hukuruhusu kuunda programu zinazojitosheleza za nje ya mtandao ambazo zinaweza kuhifadhi taarifa zote zinazohitaji hata wakati hakuna muunganisho wa Mtandao.

Utendaji wa uhifadhi wa wavuti wa HTML5 huruhusu ukurasa wa wavuti kuhifadhi data kwenye kompyuta ya mgeni. Taarifa hii inaweza kuwa ya muda mfupi, ambayo inafutwa unapozima kivinjari, au ya muda mrefu, ambayo inabakia kupatikana kwenye ziara zinazofuata kwenye ukurasa wa wavuti.

Taarifa zilizohifadhiwa kwenye hifadhi ya wavuti hazihifadhiwa kwenye mtandao, lakini kwenye kompyuta ya mgeni wa ukurasa wa wavuti. Kwa maneno mengine, hifadhi ya mtandao ina maana ya kuhifadhi data si kwenye mtandao, lakini kuhifadhi data kutoka kwenye mtandao.

Kuna aina mbili za hifadhi ya wavuti, ambayo kwa namna fulani inahusishwa na vitu viwili:

Hutumia kitu Hifadhi ya ndani kuhifadhi data kwa tovuti nzima kwa kudumu. Hii inamaanisha kuwa ikiwa ukurasa wa wavuti utahifadhi data katika hifadhi ya ndani, data hiyo itapatikana kwa mtumiaji atakaporejea kwenye ukurasa huo wa wavuti siku inayofuata, wiki ijayo, au mwaka ujao.

Bila shaka, vivinjari vingi pia humpa mtumiaji chaguo la kufuta hifadhi ya ndani. Baadhi ya vivinjari hutekeleza hili kama mkakati wa yote au bila chochote na kufuta data yote ya ndani, kama vile vidakuzi hufutwa. (Kwa hakika, katika baadhi ya vivinjari, mfumo wa vidakuzi na hifadhi ya ndani zimeunganishwa, kwa hivyo njia pekee ya kufuta data ya ndani ni kufuta vidakuzi.) Na vivinjari vingine vinaweza kumruhusu mtumiaji kuona data ya kila tovuti na kufuta data ya tovuti au tovuti zilizochaguliwa.

Hutumia kitu KipindiUhifadhi kwa uhifadhi wa muda wa data kwa dirisha moja la kivinjari au kichupo. Data hii inapatikana tu hadi mtumiaji afunge dirisha au kichupo, baada ya hapo kipindi kinaisha na data itafutwa. Lakini data ya kipindi huhifadhiwa ikiwa mtumiaji ataenda kwenye tovuti nyingine na kisha kurejea tena, mradi tu ifanyike katika dirisha lile lile la kivinjari.

Kutoka kwa mtazamo wa msimbo wa ukurasa wa wavuti, uhifadhi wa ndani na uhifadhi wa data wa kipindi hufanya kazi sawa kabisa. Tofauti pekee ni muda wa kuhifadhi data.

Kutumia hifadhi ya ndani kunatoa fursa nzuri zaidi ya kuhifadhi taarifa zinazohitajika kwa ziara zinazofuata za ukurasa wa wavuti na mtumiaji. Na hifadhi ya kipindi hutumiwa kuhifadhi data ambayo inahitaji kuhamishwa kutoka ukurasa mmoja hadi mwingine. (Hifadhi ya kipindi inaweza pia kuhifadhi data ya muda ambayo inatumika kwenye ukurasa mmoja pekee, lakini vigeu vya kawaida vya JavaScript hufanya kazi vizuri kwa kusudi hili.)

Hifadhi ya ndani na uhifadhi wa kipindi huhusishwa na kikoa cha tovuti. Kwa hivyo, ukihifadhi data ya ukurasa wa www..html katika hifadhi ya ndani, data hii itapatikana kwa ukurasa wa www..html, kwa sababu kurasa hizi zote mbili zina kikoa sawa. Lakini data hii haitapatikana kwa kurasa kwenye vikoa vingine.

Kwa kuongeza, kwa sababu hifadhi ya wavuti iko kwenye kompyuta ya mtumiaji fulani (au kifaa cha rununu), inahusishwa na kompyuta hiyo, na ukurasa wa wavuti uliofunguliwa kwenye kompyuta hiyo na kuhifadhi data katika hifadhi yake ya ndani haina ufikiaji wa habari ambayo imehifadhi kwenye kompyuta nyingine. . Vile vile, ukurasa wa wavuti huunda hifadhi tofauti ya ndani ikiwa utaingia na jina la mtumiaji tofauti au kuendesha kivinjari tofauti.

Ingawa vipimo vya HTML5 haviweki sheria zozote ngumu na za haraka kuhusu hifadhi ya juu zaidi, vivinjari vingi huweka kikomo kwa MB 5. Unaweza kuingiza data nyingi katika kiasi hiki, lakini haitatosha ikiwa ungependa kutumia hifadhi ya ndani kwa ajili ya kuboresha utendakazi na kuweka akiba ya picha au video nyingi ndani yake (na, kwa kweli, hifadhi ya ndani haijaundwa kwa ajili ya madhumuni kama haya).

Kwa kuhifadhi kiasi kikubwa cha data, kiwango cha hifadhidata kinachoendelea IndexedDB inaruhusu uhifadhi wa ndani wa kiasi kikubwa zaidi - kwa kawaida 50 MB kuanza na zaidi ikiwa mtumiaji atakubali.

Kuhifadhi data

Kabla ya kipande cha habari kuwekwa kwenye hifadhi ya ndani au ya kikao, lazima ipewe jina la maelezo. Jina hili linaitwa ufunguo na linahitajika ili data iweze kurejeshwa katika siku zijazo.

Syntax ya kuhifadhi kipande cha data ni kama ifuatavyo:

localStorage = data;

// Uhifadhi wa ndani wa JS["jina la mtumiaji"] = "Ivan Petrov";

Bila shaka, kuhifadhi kipande cha maandishi tuli haina maana. Kwa kawaida, tunahitaji kuhifadhi aina fulani ya data tofauti, kama vile tarehe ya sasa, matokeo ya hesabu ya hisabati, au data ya maandishi iliyoingizwa na mtumiaji katika sehemu za fomu. Ufuatao ni mfano wa kuhifadhi data ya maandishi iliyoingizwa na mtumiaji:

Kazi saveData() ( // Pata thamani za sehemu za maandishi var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Hifadhi maandishi yaliyowekwa katika uga wa maandishi ndani ya hifadhi ya ndani LocalStorage["localData"] = localData; // Hifadhi maandishi yaliyowekwa kwenye sehemu ya maandishi kwenye kipindi cha hifadhi ya kipindiUhifadhi["sessionData"] = sessionData; ) kazi loadData() ( // Pakia data iliyohifadhiwa kutoka kwa hifadhi var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Onyesha data hii katika sehemu za maandishi ikiwa (localData != null) ( document.getElementById("localData").value = localData ; ) ikiwa (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )

Ukurasa una sehemu mbili za maandishi: kwa uhifadhi wa ndani (juu) na uhifadhi wa kipindi (chini). Kubofya kitufe cha "Hifadhi" huhifadhi maandishi yaliyoingia kwenye mashamba ya maandishi, na kubofya kitufe cha "Mzigo" huonyesha data inayofanana iliyohifadhiwa kwenye mashamba.

Hifadhi ya wavuti pia inasaidia sintaksia ya sifa isiyo ya kawaida. Kulingana na sheria za sintaksia hii, tunarejelea eneo la hifadhi linaloitwa jina la mtumiaji kama localStorage.username badala ya localStorage["jina la mtumiaji"]. Aina zote mbili za sintaksia ni sawa, na kutumia moja au nyingine ni suala la upendeleo wa kibinafsi.

Hifadhi ya wavuti haifanyi kazi bila seva ya wavuti

Katika utafiti wako wa hifadhi ya wavuti, unaweza kukutana na tatizo lisilotarajiwa. Katika vivinjari vingi, hifadhi ya wavuti hufanya kazi tu kwa kurasa zinazotolewa na seva ya wavuti. Haijalishi wapi seva iko, kwenye mtandao au kwenye kompyuta yako mwenyewe, jambo muhimu zaidi ni kwamba kurasa hazizinduliwa kutoka kwa gari la ndani (kwa mfano, kwa kubofya mara mbili icon ya faili ya ukurasa).

Kipengele hiki ni athari ya upande wa jinsi vivinjari vinavyotenga nafasi ya hifadhi ya ndani. Kama ilivyoelezwa hapo awali, vivinjari huweka kikomo kwa hifadhi ya kila tovuti hadi 5MB, ambayo inavihitaji kuhusisha kila ukurasa unaotaka kutumia hifadhi ya ndani na kikoa cha tovuti.

Kwa hivyo ni nini hufanyika ikiwa utafungua ukurasa unaotumia hifadhi ya wavuti kutoka kwa diski kuu ya eneo lako? Yote inategemea kivinjari. Internet Explorer inaonekana kupoteza usaidizi wa hifadhi ya wavuti kabisa. Vipengee vya Uhifadhi wa ndani na vipindi vya Uhifadhi hupotea na kujaribu kuvitumia husababisha hitilafu ya JavaScript.

Katika Firefox, vitu vya Uhifadhi wa ndani na vikao vya Uhifadhi vinabaki mahali na vinaonekana kuungwa mkono (hata Modernizr huamua kwamba vinasaidiwa), lakini kila kitu kinachotumwa kwenye hifadhi kinatoweka kwa Mungu anajua wapi. Kivinjari cha Chrome tena ni kitu tofauti - utendakazi mwingi wa hifadhi ya wavuti hufanya kazi inavyopaswa, lakini baadhi ya vipengele (kama tukio la onStorage) havifanyi kazi.

Matatizo kama hayo hutokea unapotumia API ya Faili. Kwa hivyo utajiokoa mwenyewe shida nyingi ikiwa utaweka ukurasa unaojaribu kwenye seva ya majaribio ili kuzuia kutokuwa na uhakika wote.

Usaidizi wa kivinjari kwa hifadhi ya wavuti

Hifadhi ya wavuti ni mojawapo ya vipengele vinavyotumika zaidi vya HTML5, na kiwango kizuri cha usaidizi katika kila kivinjari kikuu. Jedwali hapa chini linaonyesha matoleo ya chini kabisa ya vivinjari vikuu vinavyotumia hifadhi ya wavuti:

Vivinjari hivi vyote hutoa uhifadhi wa ndani na uwezo wa kuhifadhi data ya kipindi. Lakini usaidizi wa tukio la onStorage unahitaji matoleo ya baadaye ya vivinjari, kama vile IE 9, Firefox 4 au Chrome 6.

Toleo la shida zaidi ni IE 7, ambayo haiungi mkono uhifadhi wa wavuti hata kidogo. Kama suluhu, unaweza kuiga hifadhi ya wavuti kwa kutumia vidakuzi. Sio suluhisho kamili, lakini inafanya kazi. Ingawa hakuna hati rasmi ya kuziba pengo hili, sehemu nzuri za kuanzia zinaweza kupatikana kwenye ukurasa wa HTML5 wa Kivinjari (chini ya "Hifadhi ya Wavuti").

Kuhifadhi data moja kwa moja kwenye kivinjari kuna faida nyingi, moja kuu ni upatikanaji wa haraka na wa mtandao wa "database". Kwa sasa kuna njia 4 amilifu za hii (pamoja na iliyoacha kutumika):

1. Hifadhi ya ndani
2. Hifadhi ya kikao
3. IndexedDB
4. WebSQL (imeacha kutumika)

Vidakuzi

Vidakuzi ni njia ya kawaida ya kuhifadhi data ya mfuatano rahisi ndani ya hati. Kwa kawaida, vidakuzi hutumwa kutoka kwa seva hadi kwa mteja, ambayo inaweza kuzihifadhi na kisha kuzituma kwa seva kwa kujibu maombi yanayofuata. Hii inaweza kutumika kwa mambo kama vile kudhibiti vipindi vya akaunti au kufuatilia maelezo ya mtumiaji.

Zaidi ya hayo, vidakuzi vinaweza kutumika kuhifadhi data kwa upande wa mteja. Kwa hivyo, pia hutumiwa mara nyingi kuhifadhi data ya jumla kama vile mipangilio ya mtumiaji.

Shughuli za kimsingi za CRUD na vidakuzi

// Unda document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;salama"; // Soma (Zote) console.log(document.cookie); // Sasisha document.cookie = "user_age=24;max-age=31536000;salama"; // Futa document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

Faida za kuki

• Wanaweza kutumika kuwasiliana na seva
• Tunaweza kuweka vidakuzi kuisha kiotomatiki badala ya kuvifuta wenyewe.

Hasara za kuki

• Wao huongezwa kwenye upakiaji wa ukurasa wa hati
• Wanaweza kuhifadhi kiasi kidogo cha data
• Zinaweza kuwa na mifuatano pekee.
• Masuala ya usalama yanayowezekana.
• Mbinu hii haijapendekezwa kwa kuhifadhi data kwenye mteja tangu ujio wa API ya Hifadhi ya Wavuti (uhifadhi wa ndani na wa kipindi).

Usaidizi wa kivinjari

Vidakuzi vina usaidizi wa kimsingi katika vivinjari vyote vikuu.

Hifadhi ya ndani

Hifadhi ya ndani ni sehemu ndogo ya API ya Hifadhi ya Wavuti, API maalum ya kuhifadhi data kwenye kivinjari katika muundo wa thamani-msingi. API hii iliundwa kama suluhu la matatizo ya vidakuzi na ni njia angavu na salama zaidi ya kuhifadhi data rahisi ndani ya kivinjari.

Ingawa kitaalam tunaweza tu kuhifadhi mifuatano kwenye hifadhi ya ndani, hii inashindikana kwa kugeuza kuwa JSON. Kwa njia hii tunaweza kuhifadhi data changamano zaidi katika hifadhi ya ndani ikilinganishwa na vidakuzi.

Shughuli za msingi za CRUD na hifadhi ya ndani

// Unda const user = ( jina: "Ire Aderinokun", umri: 25 ) localStorage.setItem("user", JSON.stringify(user)); // Soma (Single) console.log(JSON.parse(localStorage.getItem("mtumiaji"))) // Sasisha const updatedUser = ( jina: "Ire Aderinokun", umri: 24 ) localStorage.setItem("user", JSON.stringify(updatedUser)); // Futa localStorage.removeItem("mtumiaji");

Faida za Hifadhi ya Ndani

• Hutoa kiolesura rahisi na angavu zaidi cha kuhifadhi data.
• Ni salama zaidi kwa kuhifadhi data kwenye mteja.
• Inakuruhusu kuhifadhi data zaidi (pointi zote 3 - ikilinganishwa na vidakuzi).

Hasara za Hifadhi ya Ndani

• Inakuruhusu kuhifadhi mifuatano pekee

Usaidizi wa kivinjari

Hifadhi ya kikao

Hifadhi ya kipindi ni aina ya pili ya API ya Hifadhi ya Wavuti. Ni sawa kabisa na hifadhi ya ndani isipokuwa kwamba data huhifadhiwa kwa kipindi cha kichupo cha kivinjari pekee. Mara tu mtumiaji anapoondoka kwenye ukurasa na kufunga kivinjari, data itafutwa.

Shughuli za kimsingi za CRUD zilizo na uhifadhi wa kipindi

// Unda const user = ( jina: "Ire Aderinokun", umri: 25 ) sessionStorage.setItem("user", JSON.stringify(user)); // Soma (Single) console.log(JSON.parse(sessionStorage.getItem("mtumiaji"))) // Sasisha const updatedUser = ( jina: "Ire Aderinokun", umri: 24 ) sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Futa sessionStorage.removeItem("mtumiaji");

Faida, hasara na usaidizi katika vivinjari ni sawa na uhifadhi wa ndani.

IndexedDB

IndexedDB ni suluhisho ngumu zaidi na iliyokomaa zaidi ya kuhifadhi data kwenye kivinjari, kwani ni API ya kiwango cha chini ya kuhifadhi idadi kubwa ya data iliyopangwa kwenye mteja. Katika msingi wake, ni hifadhidata inayolengwa na kitu kulingana na JavaScript ambayo huturuhusu kuhifadhi na kupata data iliyoorodheshwa kwa ufunguo kwa urahisi.

WebSQL

WebSQL ni API ya hifadhidata ya uhusiano ya upande wa mteja sawa na SQLite. Kufikia 2010, kikundi kazi cha W3C kiliacha kufanyia kazi vipimo hivi na API hii si sehemu tena ya vipimo vya HTML na haipaswi kutumiwa.

Kuunda programu ya orodha ya mambo ya kufanya kwa kawaida ndiyo programu ya kwanza unayotengeneza unapojifunza JavaScript, lakini tatizo la programu hizi zote ni kwamba unapopakia upya ukurasa, orodha hizo zote hupotea.
Kuna suluhisho rahisi - kutumia hifadhi ya ndani. Faida ya hifadhi ya ndani ni kwamba unaweza kuhifadhi biti za data kwenye kompyuta ya mtumiaji, na ukurasa unapopakiwa upya, orodha zote za kazi bado zipo.

Hifadhi ya ndani ni nini?

Hifadhi ya data ya ndani ni sehemu ya mtandao wa hifadhi, ambayo yenyewe ni sehemu ya vipimo vya HTML5. Kuna chaguzi mbili za kuhifadhi data katika hali maalum:

• Hifadhi ya Ndani: Huhifadhi data bila tarehe ya mwisho wa matumizi, na hili ndilo chaguo ambalo tutatumia kwa sababu tunataka uorodheshaji wetu usalie kwenye ukurasa kwa muda mrefu iwezekanavyo.
• Hifadhi ya Kipindi: Huhifadhi data ya kipindi kimoja pekee, kwa hivyo ikiwa mtumiaji atafunga kichupo na kukifungua tena, data yake yote itapotea.

Kwa maneno rahisi, hifadhi yote ya wavuti ni kuhifadhi jozi za funguo/thamani zenye jina ndani ya nchi, na tofauti na vidakuzi, data hii huhifadhiwa hata ukifunga kivinjari chako au kuzima kompyuta yako.

Ikiwa tutafikiria juu ya orodha ya mambo ya kufanya, basi utahitaji zifuatazo:

• Sehemu ya kuingilia ambapo unaweza kuchapisha orodha yetu
• Ingiza kitufe ili kuongeza orodha
• Kitufe cha kufuta shajara nzima
• Chombo cha orodha ambacho hakijaagizwa ambapo orodha yetu itawekwa kwenye orodha ya vipengele
• Na hatimaye, tunahitaji chombo cha DIV ili kuonyesha arifa unapojaribu kuingiza kazi tupu.

Kwa hivyo HTML yetu inapaswa kuonekana kama hii: