Як використовувати local storage для javascript
Створення власного додатка для складання списків запланованих справ - це, мабуть, одне з перших додатків, з яким стикаються розробники, починаючи вивчати j # 097; vascript. І проблема подібних додатків полягає в тому, що коли ви оновлюєте сторінку, все списки пропадають.
Тут є досить просте рішення, яке полягає в використанні Local storage. Гарна риса Local storage полягає в тому, що ви можете зберігати інформацію на жорсткий диск користувачів, так що, коли вони оновлюють сторінки зі списком запланованих завдань, все залишається на своїх місцях.
Що таке Local storage?
джерело зображення
Local storage (локальне сховище) - це частина веб-сховища, яке є частиною специфікації HTML5. У специфікації наводиться дві опції зберігання даних:
* Local storage: дозволяє зберігати дані без терміну закінчення, і саме його ми сьогодні будемо використовувати, так як нам потрібно, щоб списки запланованих завдань залишалися на сторінці наскільки можливо довго.
* Session Storage: зберігає дані лише протягом окремої сесії. Так що, якщо користувач закриє вкладку, а потім знову відкриє, - всі дані пропадуть.
Простіше кажучи, все що робить веб-сховище, це локально зберігає пари ключ-значення з іменами, і на відміну від cookies, ці дані зберігаються навіть якщо ви закриваєте браузер або виключаєте комп'ютер.
Якщо мова йде про список запланованих справ, то нам знадобиться:
* Поле введення для назви завдання
* Кнопка введення для внесення завдання в список
* Кнопка для очищення запланованих завдань
* Ненумерований список, в який будуть поміщатися завдання
* Div для відображення попередження про спробу внести порожню завдання в список.
Отже, наш html-код буде виглядати наступним чином:
Тут у нас досить простий HTML, в якому ми динамічно будемо публікувати контент за допомогою j # 097; vascript.
Так як в даному прикладі ми використовуємо jQuery, вам слід включити цю бібліотеку в ваш HTML-документ.
Так як ми займаємося розробкою простого додатка для складання списку запланованих завдань, тут перше, про що нам потрібно подумати, це про те, щоб вловити момент натискання на кнопку додавання завдання, і про те, щоб перевірити, чи не порожня чи форма в цей момент:
Тут ми перевіряємо натискання на кнопку, і запускаємо простий тест на те, заповнив користувач необхідні форми. Якщо ж ні, то з'являється div з попередженням, і тримається на увазі 1000ms, після чого зникає. Нарешті, ми повертаємо false, і тому браузер не зчитує решту скрипта, і не додає пункт в список.
Наступне, що нам потрібно зробити, це внести пункт списку зі значенням, наданим в поле введення. Це відбувається тоді, коли користувач вводить всі необхідні дані і натискає кнопку - кожна нова задача стає в початок списку, і дані зберігаються в local storage наступним чином:
Як видно, тут використовується досить стандартний jQuery, і коли справа доходить до local storage, нам потрібно зберегти ключ і значення. Ключ - це назва, яку ми самі вказали, і в даному випадку це 'todos'. Далі нам потрібно вказати, що ми збираємося зберегти, і в даному випадку - це весь HTML, який поміщений всередину ненумерованого списку 'todos'. Як видно, ми просто витягли ці дані за допомогою jQuery, і повернули значення false, щоб наша форма не запустила підтвердження і перезапуск сторінки.
Наступний етап полягає в перевірці, чи було що-небудь вже збережено в local storage на нашому комп'ютері, і якщо так, то нам потрібно відобразити ці дані на сторінці. Так що, так як ми поставили нашому ключу ім'я todos, нам потрібно перевірити його наявність в такий спосіб:
Для перевірки ми скористалися простим виразом if, а потім ми отримуємо те, що у нас збережено в local storage, і поміщаємо ці дані в якості HTML в ненумерований списку запланованих завдань.
Якщо ви протестуєте наше невелике додаток, перезагрузив сторінку, то побачите, що воно вже працює, і все, що нам залишилося зробити, це створити функцію для тих випадків, коли користувач вирішує очистити всі форми. Коли це відбувається, нам потрібно очистити весь вміст local storage, і перезавантажити сторінку, щоб зміни вступили в силу, потім ми повертаємо значення false, щоб запобігти появі знака # на початку URL.
На цьому ми завершуємо розробку нашого маленького, але досить корисного додатка. Повний код виглядає наступним чином:
Підтримка веб-сховища досить хороша. Воно підтримується всіма сучасними браузерами, включаючи навіть IE8. Проблеми можуть виникнути хіба що в IE7, якщо ви до сих пір маєте справи з цією версією.
Local storage в маленьких додатках може виявитися дуже корисним властивістю. Що ще потрібно для зберігання невеликого обсягу даних?