Механизам лоцалСтораге обезбеђује тип веб објекта за складиштење који вам омогућава да складиштите и преузимате податке у претраживачу. Можете чувати и приступати подацима без истека; подаци ће бити доступни чак и након што посетилац затвори ваш сајт.
Обично ћете приступати лоцалСтораге користећи ЈаваСцрипт. Са малом количином кода, можете направити узорак пројекта, попут бројача резултата. Ово ће показати како можете да складиштите и приступате трајним подацима користећи само код на страни клијента.
Шта је лоцалСтораге у ЈаваСцрипт-у?
Објект лоцалСтораге је део АПИ-ја за веб складиштење који подржава већина веб прегледача. Можете да складиштите податке као парове кључ/вредност користећи лоцалСтораге. Јединствени кључеви и вредности треба да буду у формату УТФ-16 ДОМ стринг.
Ако желите да складиштите објекте или низове, мораћете да их конвертујете у низове користећи ЈСОН.стрингифи() методом. Можете похранити до 5МБ података у лоцалСтораге. Такође, сви прозори са истим пореклом могу да деле податке локалног складиштења те локације.
Прегледач неће избрисати ове податке чак ни када их корисник затвори. Биће доступан веб локацији која га је креирала током било које будуће сесије. Међутим, не би требало да користите лоцалСтораге за осетљиве податке јер им друге скрипте које се покрећу на истој страници могу приступити.
лоцалСтораге вс. сессионСтораге
Тхе лоцалСтораге и сессионСтораге објекти су део АПИ-ја за веб складиште који локално складишти парове кључ-вредност. Сви модерни претраживачи подржавају оба. Са лоцалСтораге, подаци не истичу чак ни након што корисник затвори свој претраживач. Ово се разликује од сессионСтораге-а који брише податке када се сесија странице заврши. Сесија странице се завршава када затворите картицу или прозор.
Код који се користи у овом пројекту доступан је у а ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом. Ако желите да погледате живу верзију пројекта бројача резултата, можете погледати уживо демо.
Како функционише лоцалСтораге?
Функционалности лоцалСтораге можете приступити преко Виндов.лоцалСтораге имовина. Ово својство пружа неколико метода као што су сетИтем(), гетИтем() и ремовеИтем(). Можете их користити за чување, читање и брисање парова кључ/вредност.
Како складиштити податке у лоцалСтораге
Можете да складиштите податке у лоцалСтораге користећи сетИтем() методом. Овај метод прихвата два аргумента, кључ и одговарајућу вредност.
виндов.лоцалСтораге.сетИтем('Питхон', 'Гвидо ван Росум');овде, Питхон је кључ и Гвидо ван Росум је вредност. Ако желите да сачувате низ или објекат, мораћете да га конвертујете у стринг. Можете да конвертујете низ или објекат у стринг користећи ЈСОН.стрингифи() методом.
прозор.лоцалСтораге.сетИтем('Питхон', 'Гуидо ван Россум');конст студент = {
назив: "Јуврај",
оцене: 85,
предмет: "Машинско учење"
}
конст резултати = [76, 77, 34, 67, 88];
прозор.лоцалСтораге.сетИтем('резултат', ЈСОН.стрингифи (ученик));
прозор.лоцалСтораге.сетИтем('маркс', ЈСОН.стрингифи (резултати));
Како читати податке из лоцалСтораге-а
Можете читати податке из лоцалСтораге користећи гетИтем() методом. Овај метод прихвата кључ као параметар и враћа вредност као стринг.
дозволити дата1 = прозор.лоцалСтораге.гетИтем('Питхон');
дозволити дата2 = прозор.лоцалСтораге.гетИтем('резултат');
конзола.лог (подаци1);
конзола.лог (подаци2);
Ово производи следећи излаз:
Гвидо ван Росум
{"име":"Иуврај","оцене":85,"предмет":"Машинско учење"}Ако желите да конвертујете резултат из стринга у објекат, требало би да користите ЈСОН.парсе() методом.
дозволити дата2 = ЈСОН.парсе(прозор.лоцалСтораге.гетИтем('резултат'));
конзола.лог (подаци2);Како избрисати локалне сесије складиштења
Можете избрисати сесије лоцалСтораге користећи Обриши предмет() методом. Морате да проследите кључ као параметар овом методу да бисте избрисали пар кључ-вредност. Ако кључ постоји, метода ће избрисати пар кључ-вредност, а ако кључ не постоји, метода неће учинити ништа.
виндов.лоцалСтораге.ремовеИтем('Питхон');
виндов.лоцалСтораге.ремовеИтем('Ц++');Како избрисати све ставке у локалном складишту
Можете да обришете све ставке у локалном складишту користећи јасно() методом. Не морате да проследите ниједан параметар овом методу.
прозор.локално складиште.јасно();Како пронаћи дужину лоцалСтораге
Можете пронаћи дужину лоцалСтораге користећи лоцалСтораге.ленгтх имовина.
дозволити лен = лоцалСтораге.ленгтх;
конзола.лог (лен);Како добити кључ на датој позицији
Можете добити кључ на датој позицији користећи кључ () методом. Овај метод прихвата индекс као параметар.
дозволити д = лоцалСтораге.кеи(1);
конзола.лог (д);Метода кеи() се првенствено користи за петљу кроз све ставке у лоцалСтораге.
Како проћи кроз све ставке у лоцалСтораге-у
Можете итерирати све ставке у лоцалСтораге користећи фор петљу.
за (дозволити и = 0; и < лоцалСтораге.ленгтх; и++){
дозволити кључ = лоцалСтораге.кеи (и);
дозволити вредност = лоцалСтораге.гетИтем (кључ);
конзола.лог (кључ, вредност);
}Метода кеи() прихвата индекс као аргумент и враћа одговарајући кључ. Метод гетИтем() прихвата кључ као аргумент и враћа одговарајућу вредност. На крају, цонсоле.лог() метода штампа пар кључ-вредност.
Једноставан ЈаваСцрипт пројекат заснован на лоцалСтораге
Са разумевањем његових основних метода, можете се развити једноставан ЈаваСцрипт пројекат заснован на локалномСтораге. У овом пројекту ћете креирати апликацију за бројач резултата која ће повећавати и смањивати број бодова у складу са кликом на дугме. Такође ћете имплементирати функционалност за брисање свих ставки у лоцалСтораге-у.
Направите ан индек.хтмл и сцрипт.јс датотеку у новом фолдеру и отворите датотеке у свом омиљеном уређивачу кода. Користите следећи ХТМЛ код да бисте креирали интерфејс за апликацију бројача резултата:
<!ДОЦТИПЕ хтмл>
<хтмл>
<тело>
<х1>лоцалСтораге у ЈаваСцрипт-у</h1>
<дугме онцлицк="ПовећањеЦоунтер()" типе="дугме">Повећајте резултат</button>
<дугме онцлицк="смањитиЦоунтер()" типе="дугме">Смањи резултат</button>
<дугме онцлицк="цлеарЦоунтер()" типе="дугме">Обриши локалну меморију</button>
<стр>Оцена:</п>
<п ид="резултат"></п>
<стр>Кликните на "Повећајте резултат" дугме за повећање броја бодова</п>
<стр>Кликните на "Смањи резултат" дугме за смањење броја бодова</п>
<стр>Кликните на "Обриши локалну меморију" дугме да обришете локалну меморију</п>
<стр>
Можете затворити картицу претраживача (или прозор), и покушати опет.
Видећете да подаци и даље постоје ијене изгубљен и након затварања
претраживач.
</п>
<скрипт срц="сцрипт.јс"></script>
</body>
</html>Ова страница садржи три дугмета: Повећајте резултат, Смањи резултат, и Обриши локалну меморију. Ова дугмад позивају ПовећањеЦоунтер(), смањитиЦоунтер(), и цлеарЦоунтер() функције респективно. Користите следећи код да бисте додали функционалност апликацији за бројач резултата помоћу ЈаваСцрипт-а.
функцијаПовећањеЦоунтер() {
вар цоунт = Број(прозор.лоцалСтораге.гетИтем("цоунт"));
цоунт += 1;
виндов.лоцалСтораге.сетИтем("цоунт", цоунт);
доцумент.гетЕлементБиИд("резултат").иннерХТМЛ = цоунт;
}Тхе ПовећањеЦоунтер() функција преузима број помоћу методе гетИтем(). Конвертује резултат у број, пошто гетИтем() враћа стринг и чува га у променљивој цоунт.
Први пут када кликнете на Повећајте резултат дугме ће бити пре сваког позива на сетИтем(). Ваш претраживач неће пронаћи цоунт кључ у лоцалСтораге, тако да ће вратити нулту вредност. Пошто функција Нумбер() враћа 0 за нулти унос, не треба јој никакво посебно руковање случајевима. Код може безбедно да повећа вредност бројача пре него што је сачува и ажурира документ да би приказао нову вредност.
функцијасмањитиЦоунтер() {
вар цоунт = Број(прозор.лоцалСтораге.гетИтем("цоунт"));
цоунт -= 1;
виндов.лоцалСтораге.сетИтем("цоунт", цоунт);
доцумент.гетЕлементБиИд("резултат").иннерХТМЛ = цоунт;
}Тхе смањитиЦоунтер() функција преузима и проверава податке исто као ПовећањеЦоунтер() ради. То смањује цоунт променљиву за 1, што је подразумевано на 0.
функцијацлеарЦоунтер() {
прозор.локално складиште.јасно();
доцумент.гетЕлементБиИд("резултат").иннерХТМЛ = "";
}Последње, тхе цлеарЦоунтер() функција брише све податке из лоцалСтораге користећи јасно() методом.
Урадите више са лоцалСтораге
Објект лоцалСтораге има неколико метода укључујући сетИтем(), гетИтем(), ремовеИтем() и цлеар(). Иако је лоцалСтораге једноставан за коришћење, није безбедно чувати осетљиве информације. Али добар је избор за развој пројеката који не захтевају много складиштења и не укључују никакве осетљиве информације.
Желите да направите још један ЈаваСцрипт пројекат заснован на локалном складиштењу? Ево основне апликације за листу обавеза коју можете развити користећи ХТМЛ, ЦСС и ЈаваСцрипт.
