А просто решение на този проблем - използването на местно хранилище (локално). Локално хранилище ви позволява да съхранявате данни за машината на потребителя и лесно можете да изтеглите списък от него след като страницата се обновява. В тази статия, ние ще напиша малко със задачи, списък с помощта на локално хранилище.
Какво е локално хранилище?
Локално хранилище ( "Уеб хранилище") първоначално е бил част от спецификацията на HTML5, но сега се премества да се разделят. Хранилището на данни по два начина:
- Локално хранилище. постоянното хранилище, което е това, което ние ще използваме.
- Хранилище за сесията. магазини само за данни на сесията, когато потребителят затвори страницата, данните ще бъдат загубени.
Локално хранилище ви позволява да съхранявате данни за компютъра на потребителя под формата на двойки ключ-стойност, както и тези данни ще бъде на разположение, дори и след като затворите браузъра или да изключите компютъра си.
За да създадете със задачи, списък, ние трябва:
- Текст елемент вход за въвеждане на съдържание.
- добавяне ключов елемент в списъка.
- бутон, за да изчистите списъка.
- Самият списък (
- ).
- И допълнително Разделение за показване на грешки.
Така HTML маркиране ще изглежда така:
защото Ние използваме JQuery също трябва да го свържете.
Първо трябва да проследява кликванията върху бутона Add и проверете дали полето за въвеждане, не е празна:
Този код проверява стойността на текстово input'a и да е празна - показва грешка и връща фалшиви, че останалата част от кода не е доволен и Продуктът НЕ беше добавен в списъка.
След това трябва да се добави по въпроса към списъка. Ние ще използваме метода на сравнява първите по този начин елементи ще бъдат добавени към горната част на списъка. Целият списък се съхранява в местния магазин:
За да работите с локално хранилище е необходимо да се осигури ключ и съответната му стойност. В нашия случай, ние наричаме ключ "Todos", а стойността ще бъде всичко HTML код, който се съдържа в списъка (в маркера
- ). Този код се получава лесно с помощта на JQuery. И накрая, ние се върне фалшиви, за да се предотврати изпращането на формуляра и се презарежда страницата.
- Интерактивни качвате файлове в HTML5 и JQuery
- Правейки аудио плеър с JQuery и jPlayer
- Създаване на бутони с вграден индикатор процес
- Изборът на цвят в изображението, като използвате в HTML5
- Създаване на плъзгача на изображението с JQuery и CSS3
- Цифров часовник с JQuery и CSS3
- Маркери за чист CSS3
- Ефекти за анимация за сваляне с CSS
Следващата стъпка - проверка на местния магазин, ако има стойност с ключ "Todos", а след това да изтеглите списъка от местния магазин:
защото съхраняваме завършен HTML да се съхранява, ние просто поставете този код в списъка.
Нашата със задачи, списък е почти готов, остава само да се реализират списък почистване функция. Когато потребителят кликне върху бутона ще изтрие целия списък, както и на локалното хранилище ще бъдат изчистени:
Готово! Пълният код изглежда така:
Подкрепа браузър
Уеб магазина се поддържа от всички основни браузъри дори IE8. Страхът трябва само IE7 и по-долу.
заключение
Локално хранилище в такива малки приложения може да бъде отличен заместител на базата данни. Съхраняване на малки количества данни не трябва да предизвиква затруднения.
Вижте също
Свързани статии