Как да се използва локално хранилище за JavaScript
Създайте своя собствена молба за списъка на делата, насрочени - това е може би едно от първите приложения, които разработчиците започват да се учат й # 097; vascript. И проблемът на тези приложения е, че когато се актуализира на страницата, всички списъци изчезват.
Налице е сравнително просто решение, което е използването на местни съхранение. Локално хранилище е добра черта е, че можете да съхранявате информация на твърдия диск на потребителя, така че, когато се актуализира на страницата със списъка на планирани задачи, всичко остава на мястото си.
Какво е Локално хранилище?
източник на изображение
Локално хранилище (локално) - е част от уеб магазин, който е част от спецификацията на HTML5. Спецификацията предвижда две възможности за съхранение:
* Местни съхранение: ви позволява да съхранявате данни, без срок на годност и това е, което ние ще използваме и днес, тъй като трябва да получите списък с планирани задачи останете на страницата толкова дълго, колкото е възможно.
* Сесия на съхранение: спестява данните само за една сесия. Така че, ако потребителят затвори раздела, а след това повторно отваряне - всички данни ще бъдат загубени.
Просто казано, всичко, което прави уеб съхранение, като поддържа местни двойки ключ-стойност с имената, и за разлика от бисквитките, тези данни се запазва дори и да затворите браузъра си или да изключите компютъра си.
Когато става дума за списъка на насрочените дела, ще са ни необходими:
* Въвеждане поле за името на задачата
* Бутон Input да направи списък със задачи
* Бутон за почистване на планирани задачи
* Списък с водещи символи, които ще бъдат поставени проблем
* Div да имат предупреждение за опитват да направят списък на празен задача.
Така че нашата HTML-код ще бъде, както следва:
Тук имаме един доста прост HTML, които ще публикуваме на динамично съдържание, използвайки й # 097; vascript.
Както и в този пример, ние използваме JQuery, трябва да включите тази библиотека във вашия HTML-документ.
Тъй като ние разработваме просто приложение за списък на планирани задачи, ето първото нещо, което трябва да си помисля е да улови момента на натискане на бутона за добавяне на задача, както и че проверката не е празна, ако формата в този момент:
Тук ние проверяваме натиснете бутона, и да стартирате един прост тест за това дали потребителят попълнено необходимите формуляри. Ако не, тогава е налице Разделение с предупреждение и да се съхраняват на отнасящи се до 1000ms, а след това изчезва. И накрая, ние се върне фалшиви, и така браузърът не прочетете останалата част от сценария, и не се добавят към нашия списък.
Следващото нещо, което трябва да направите е да се направи списък позиция със стойност, предоставена в полето за въвеждане. Това се случва, когато потребителят въведе всички необходими данни и кликне върху бутон - всяка нова задача стига до горната част на списъка, както и данните, съхранявани в локалното хранилище, както следва:
Както можете да видите, че използва JQuery е доста стандартен, а когато става въпрос за местен склад, ние трябва да запазите ключа и стойността. Key - името на които ние се идентифицират, и в този случай това е Тодос. След това трябва да се уточни, че ние ще се спаси, и в този случай - това е цялата HTML, който е поставен вътре в неподреден списък "Todos". Както можете да видите, че ние просто извлича данните при използване на JQuery, и се връща стойност е невярно, че нашият вид не е започнала страницата за потвърждение и рестартирайте.
Следващият етап е да се тества дали нещо вече се съхраняват в локално хранилище на този компютър, и ако е така, ние трябва да се изобразява данните на страницата. Така че, както ни се иска нашият ключ име Тодос, ние трябва да се провери неговата наличност, както следва:
За да тествате, ние използвахме прост израз, ако и след това ние получаваме това, което сме се съхраняват в местния съхранение и поставете тези данни в HTML неподреден списък с планирани задачи.
Ако тествате нашия малък апартамент, презареждане на страницата, ще видите, че тя вече работи, както и всички ние оставихме да направите, е да се създаде функция в случаите, когато потребителят реши да изчистите всички форми. Когато това се случи, ние трябва да изчистите цялото съдържание на локално хранилище, и се презарежда страницата промените да влязат в сила, след което се връщаме към фалшиви, за да се предотврати появата на знака # в началото на URL.
С това завършва развитието на нашата малка, но доста полезно приложение. Пълният код е както следва:
Поддръжка на уеб хранилището е доста добър. Той е подкрепен от всички съвременни браузъри, дори включително IE8. Проблеми могат да възникнат с изключение на IE7, ако все още имате да правите с тази версия.
Локално хранилище в малки приложения може да бъде много полезна функция. Какво друго е необходимо да съхранявате малки обеми от данни?