Зберігання даних форм у Local Storage за допомогою jQuery

Кожен з нас стикався з ситуацією, коли заповнюючи форму, раптом щось йде не так, і всі введені дані втрачаються. Чим більша форма, тим більше це засмучує. Хоча іноді браузер може зберегти введені дані, це відбувається не завжди. І якщо це трапляється повторно, мотивація заповнювати форму зникає.

Щоб уникнути подібних неприємностей у ваших проектах, я пропоную просте рішення. Хоча дані можна відразу відправляти в базу даних, не завжди це є необхідним або доцільним. Тому в цій статті ми зосередимось на темі "Local Storage".

Як випливає з назви, "Local Storage" дозволяє зберігати дані локально в браузері користувача. Це не тільки дає можливість відновити дані у випадку помилки, але й дозволяє користувачу зробити перерву та продовжити заповнення форми пізніше.

У цій статті ми працюватимемо з браузером Mozilla Firefox, але зберігання даних також підтримується в інших сучасних браузерах.

У Firefox можна легко переглянути вміст "Local Storage", для цього потрібно зайти в "Інші інструменти" -> "Інструменти для веб-розробників". У вкладці "Веб-сховище" можна знайти розділ "Local Storage".

01. Зберігання даних

Функція активується при кожному введенні і зберігає дані у форматі JSON, що складається з ID та введеного значення. ID необхідний для того, щоб пізніше відновити дані у відповідне поле вводу. Використовуючи селектор ":input", ми враховуємо всі поля вводу, а за допомогою ".each" проходимо по всіх полях і зберігаємо дані у наш JSON.

$(':input').on('input', function() {
	var formname = "demo-form";
	var formData = [];
	localStorage.removeItem(formname);
	$('form input, form select').not('input[type="hidden"]').each(function(){
		formData.push({ id: this.id, value: this.value});
	});
	localStorage.setItem(formname, JSON.stringify(formData));
});

02. Відновлення даних

Користувач випадково закрив вкладку і повертається назад. Як за помахом чарівної палички, усі дані залишилися. Для цього спочатку перевіряємо, чи є дані у локальному сховищі. Якщо відповідь "true", ми завантажуємо всі дані з JSON за допомогою циклу "for".

$(document).ready(function() {
	var formname = "demo-form";
	if(localStorage.getItem(formname) != undefined){
		formData = JSON.parse(localStorage.getItem(formname));
		for (var i = 0; i < formData.length; i++) {
			$('[id='+formData[i].id+']').val(formData[i].value);
		}
	}
});

03. Демонстраційний проект

Для кращого розуміння я підготував невеликий демонстраційний проект з використанням Bootstrap. Щоб легко побачити, що міститься в "Local Storage", я додав тег коду, який відображає JSON. Проте краще скористатися функцією браузера, щоб переглянути дані.

LocalStorage

		Про
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

		LocalStorage

		Дані в LocalStorage

		LocalStorage Reader

var formname = "demo-form";
// Читання localStorage
$(document).ready(function() {
	if(localStorage.getItem(formname) != undefined){
		formData = JSON.parse(localStorage.getItem(formname));
		for (var i = 0; i < formData.length; i++) {
			$('[id='+formData[i].id+']').val(formData[i].value);
		}
		// Тільки для демонстрації
		$('.output').html(localStorage.getItem(formname));
	}
});
// Збереження в localStorage
$(':input').on('input', function() {
	var formData = [];
	localStorage.removeItem(formname);
	$('form input, form select').not('input[type="hidden"]').each(function(){
		formData.push({ id: this.id, value: this.value});
	});
	localStorage.setItem(formname, JSON.stringify(formData));
	// Тільки для демонстрації
	$('.output').html(localStorage.getItem(formname));
});
// Очищення localStorage
$("#clean-form").on('click', function() {
	$("#demo-form")[0].reset();
	localStorage.removeItem(formname);
	location.reload(true);
});

04. Завантаження

Я зібрав всі файли цієї інструкції, щоб налаштування було швидшим. Сподіваюся, ви отримаєте таке ж задоволення від проекту, як і я, і бажаю вам успіху.

artsblog-localstorage-master

Розмір файлу: 1,4 МБ