Автозбереження даних, введених в поля форми
Яке завдання будемо вирішувати?
Уявіть, яку бурю емоцій випробує користувач, якому потрібно додати всього лише пару символів, щоб відправити форму з великим об'ємом вручну заповнених полів, і раптом всі дані губляться. Жахливо. Якщо, звичайно, немає способу відновити дані, щоб уникнути долі Сізіфа.
Наявні варіанти вирішення
Ще одне рішення: Sisyphus.js
Реалізація автосохранения даних по типу Gmail не зовсім очевидна. Рішення повинно бути простим і легким у використанні, що тягне за собою вимогу відмовитися від застосування маніпуляцій на серверній стороні.
В результаті вийшов невибагливий скрипт, який зберігає дані форми в локальному сховищі браузера користувача і відновлює їх, коли сторінка відкривається повторно або в новій закладці. Дані видаляються з локального сховища, коли користувач відправляє або скидає форму.
Як використовувати
Використовувати Sisyphus.js дуже просто. Потрібно вибрати форму, яка буде працювати з Автозбереження:
Або захистити всі форми на сторінці:
Доступні такі опції:
Ось для чого вони призначені:
- customKeyPrefix Додатковий ключ в локальному сховищі, який використовується для зберігання значень полів форми ..
- timeout Інтервал (в секундах) між збереження даних. Якщо встановлено значення 0. то збереження буде виконуватися після оновлення будь-якого поля.
- onSave Функція, яка викликається при збереженні даних в локальному сховищі.
- onRestore Функція, яка викликається при відновленні даних зі сховища. На відміну від функції onSaveCallback. вона застосовується до всієї формі, а не до окремого полю.
- onRelease Функція, яка викликається, коли локальне сховище очищається від даних.
Навіть якщо Sisyphus.js використовувався для форми, ви можете застосовувати його для іншої форми. В даному випадку скрипт не створюватиме додаткового примірника і буде використовувати ті ж опції .:
Значення опцій можна змінювати в ході роботи:
Що потрібно для роботи плагіна
Вимоги: Sisyphus.js вимагає для роботи jQuery версії 1.2 або вище.
- Chrome 4+,
- Firefox 3.5+,
- Opera 10.5+,
- Safari 4+,
- IE 8+,
- Також працює на Android 2.2. Інші мобільні платформи, не пройшло перевірку.
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
lazyproger
Мені здається функція взагалі непотрібна
Якщо, ви так говорите, то напевно ви просто щасливчик, і не потрапляли в таку ситуацію.
Саме так. Багато разів шкодував, що немає такої функції у багатьох сайтів.))
Зашибісь! Те що треба. Дякуємо!
Вообщем цікаво, але мені здається, що це треба в дуже рідкісних випадках або ж тільки для блогу, хоча не можна пускати недописану запис на продакшен. P.S. Може напишете кілька статей про написання сайту, ну з нуля MVC + ООП, так би мовити в кращих традиція сучасності. Десь бачив на зарубіжному сайті, якщо знайду пришлю посилання =).
Діма Нагулін
Це дуже класний плагін, якщо врахувати що може працювати з багатьма формами. До речі теж приєднуюся до сказаного IKLO.
serg_29rus
Дякую за статтю!
truehazard
скрипт не викачувати і не тестував, так пробігся по тексту і не зрозумів а куди дані зберігаються в куки. а так при бажанні можна і зробити так: кожні 5 сек. собераюсь дані з форми і відправляємо їх в базу, де наприклад можемо зберігати так: текст, айпі, хеш. Потім користувач заходить і якщо є такі дані виводимо з в дану форму.
тут зовсім інше, завдання було - збереження без використання сервера.
Все круто, але скрипт визначає форму по URL що нема гуд для ajax сайтів, потрібно використовувати інший підхід: розрахувати MD5 суму всіх name форми і по ній вже зберігати локальні файли, тоді буде працювати і так і так!
Люди як устраів конфлікт між двома плагінами на сайті? Я поставив на сайт виїжджає панель і меню, але вони конфліктують, що виїжджають панель виявляється не на своєму місці!
Полазити в налаштуваннях css, якщо вона працює, але оказиваеться не там, це швидше за все воно)
спасибі, допомогло, але тепер ще один віджет встановив і знову проблема, встановив таймер зворотного відліку і він почав конфліктувати з меню, близько 4 кнопок на меню тепер не натискаються, що робити?
Буддте люб'язні викладіть приклад з кодом .далеко не сильний js, але дуже потрібно цю штуку прикрутити до моєї формі. допоможіть неотесаний .куда чого прописати
as_arsenchik
а по типу Gmail слабо розтлумачити?
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!