Zapamatování formulářových polí

Vhodné úložiště

V první řadě je třeba rozhodnout, kam se budou dočasná data ukládat. K disposici je:

  1. Na straně serveru:
    1. database,
    2. soubory,
    3. session
  2. Na straně klienta:
    1. sušenky (cookies),
    2. lokální úložiště (localStorage)

Na straně serveru

Výhoda v ukládání na straně serveru je lepší trvanlivost a přenositelnost dat, pochopitelně v případě, že má uživatel nějaký identifikátor (je na webu přihlášen). Potom není problém formulář rozepsat a dopsat (po přihlášení) na úplně jiném zařízení.

Komfortní (časté) ukládání na serveru bude vytvářet jistou zátěž, což může být v případě hodně uživatelů problém. Proto může být vhodné řešení, kdy se pravidelně v nízkých časových intervalech zálohuje u klienta; a na server se ukládají jen významnější změny nebo po uplynutí delší doby.

Na straně klienta

Ukládání na straně klienta má nepochybnou výhodu v nezatěžování našeho serveru a rychlosti (jenom zaslání a zpracování HTTP požadavku může zabrat desítky milisekund). Zátěž spojená s průběžným ukládáním se zcela přenese na klienta.

Použít je možné cookies, tam se ale větší obsah nemusí vejít (většinou se uvádí maximální velikost cookies okolo 4 kB), proto se nabízí lokální úložiště (localStorage).

Lokální úložiště

Lokální úložiště funguje od Exploreru 8, pro starší prohlížeče lze dodělat podporu přes behavior: url(#default#userData):

if(!window.localStorage && document.documentElement.addBehavior) window.localStorage = (function(name)
{
  var prefix = "storage-";
  var link = document.createElement("link");
  link.addBehavior("#default#userData");
  document.documentElement.firstChild.appendChild(link);
  return {
    setItem: function(key, value)
    {
      link.setAttribute(prefix + key, value);
      link.save(name);
    },
    getItem: function(key)
    {
      try { link.load(name); } catch(exc) {}
      return link.getAttribute(prefix + key);
    },
    removeItem: function(key)
    {
      link.removeAttribute(prefix + key);
      link.save(name);
    }
  };
})("localStorage");

Použití

Uložení obsahu
localStorage.setItem("nazev-polozky", "hodnota");

Může se používat s určitým časovým opakováním nebo po nějaké akci (zaškrtnutí políčka ve formuláři, stisknutí klávesy).

Přečtení obsahu
var obsah = localStorage.getItem("nazev-polozky");

Proběhne při načtení stránky.

Odstranění obsahu
localStorage.removeItem("nazev-polozky");

Proběhne při úspěšném odeslnání formuláře.

Před používáním localStorage je ještě vhodné testovat jeho dostupnost:

if (window.localStorage) …

Hotové řešení

Hotové řešení průběžného ukládání celých formulářů je například:

Sisyphus.js

Odkazy

  • Vault.js — Web Storage API s automatickou podporou JSONu

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

AJAX upload souborů

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Zvyšování hodnoty inputů

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

Duplikování položek formuláře v JS

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

Textarea s automatickou výškou

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

Komentáře