Jak uložit a načíst obsah formuláře na straně klienta?

8.12.2010 11:00 | Přečteno: 1295× | Programování | poslední úprava: 8.12.2010 15:41

Dnes jsem řešil zdánlivě nezajímavou věc. Uchování obsahu formuláře, který je na webu stále vidět a jeho obsah by se neměl měnit, dokud nedojde ze strany uživatele ke změně a znovuodeslání. Zároveň je nemožné provést uložení například do SESSION, či jinak, a naplnění formuláře ze strany serveru - např. PHP - při vykreslování.

Výše uvedená fakta mne vedla k jednoznačné volbě - COOKIES. Pravda, pokud je bude mít klient zakázané, řešení je k ničemu. Bude tedy využito JS, jQuery a několik rozšíření. První rozšířením bude skript pro čtení a nastavování hodnot ve formuláři (v ukázce uloženo do samostatného souboru - jquery.formvalues.js), dále budeme potřebovat jquery.json.js a jquery.cookie.js.

A nyní je již vše jednoduché.

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.json-2.2.min.js"></script>
<script src="jquery.formvalues.js"></script>
<title>Form</title>
<script>
/* <![CDATA[ */
function storeForm() {
	var date = new Date();
	date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 24 hours
	$.cookie('cookie-form', $.compactJSON($('#form').values()), { path: '/', expires: date });
}


$(document).ready(function() {
	if($.cookie('cookie-form') != null) {
		$('#form').values($.secureEvalJSON($.cookie('cookie-form')));
	}
	
});
/* ]]> */
</script>
...
<form id="form" method="post" action="...">
	<input type="text" name="firstname" value="" /><br />
	<input type="text" name="lastname" value="" /><br />	
	<input type="submit" value="Odeslat" onclick="storeForm()" />
</form>

Není to nic extra, ale třeba to někomu pomůže.

Inspirováno komentáři - v případě využití local storage je řešení následující. Navíc bude potřeba jquery.jstorage.js a úprava:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.json-2.2.min.js"></script>
<script src="jquery.formvalues.js"></script>
<script src="jquery.jstorage.js"></script>
<title>Form</title>
<script>
/* <![CDATA[ */
function storeForm() {
	if($.jStorage.storageAvailable()) {
		$.jStorage.set('cookie-form', $('#form').values());
	} else {
		var date = new Date();
		date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 24 hours
		$.cookie('cookie-form', $.compactJSON($('#form').values()), { path: '/', expires: date });
	}
}


$(document).ready(function() {
	if($.jStorage.storageAvailable()) {
		if($.jStorage.get('cookie-form', null) != null) {
			$('#form').values($.jStorage.get('cookie-form'));
		}
	} else {
		if($.cookie('cookie-form') != null) {
			$('#form').values($.secureEvalJSON($.cookie('cookie-form')));
		}
	}	
});
/* ]]> */
</script>
...
<form id="form" method="post" action="...">
	<input type="text" name="firstname" value="" /><br />
	<input type="text" name="lastname" value="" /><br />	
	<input type="submit" value="Odeslat" onclick="storeForm()" />
</form>

Díky za nápad na zlepšení. O local storage jsem věděl, ale omezení COOKIES mne nenapadlo. Ještě jednou díky.

       

Komentáře

[Filip Jirsák]

Pozor na to, že množství cookies a jejich celková velikost je omezené, větší formulář by se tam nemusel vejít. Moderní prohlížeče mají různá rozšíření umožňující ukládat uživatelská data (některá i pro offline prohlížení), která mají větší kapacitu.

[chrono]

Presne tak. Na toto je lepšie použiť localStorage a cookies použiť len keď prehliadač localStorage nepodporuje, alebo je to zakázané. Navyše sa tie údaje nebudú, pri localStorage, zbytočne posielať serveru.

[Toman]

Zápisek jsem doplnil o možnost local storage. Děkuji za věcné připomínky.

[Senior Database Programmer]

To som nepochopil. Píšeš, že cookies nemôžeš použiť pretože ich user môže mať vypnuté ale v tom JavaScripte to predsa ukladáš do cookies ?! Alebo tie cookies z tej JS knižnice JQuery sú iné ako normálne cookies browsera? Nevzťahuje sa na ne zákaz ak ich má user v browsery vypnuté? Sorry, za blbé otázky, niesom web developer.

[pavlix]

Psal, že nemůže použít SESSIONS, ne COOKIES.

[zulu]

Takže formulář, který je stále vidět.
A jaký smysl teda má držení hodnot jinde než v něm?

A nemůžeš ho naplnit na straně serveru.
Pokud ho nemůžeš plnit, tak ho nemůžeš ani zpracovávat, tak k čemu tam je?

[Bedňa]

Nechápem zmysel, prečo tie dáta nemôžeš poslať cez POST?