Jak používat místní úložiště pro jazyk JavaScript

Vytvoření úkolu je obvykle první aplikace, na které se dozvíte, jak vytvořit JavaScript, ale problém se všemi těmito aplikacemi je, že když znovu načtete stránku, všechny tyto úkoly jsou pryč.

Existuje však jednoduché řešení, a to je použití místního úložiště. Dobrá věc o místním úložišti je to, že můžete uložit tyto bity dat do počítače uživatele tak, že při opětovném načtení stránky budou všechny své todo stále existovat a místní úložiště je ve skutečnosti poměrně jednoduché, pokud jde o uložení dat a tvorbu je k dispozici na stránce.

Co je to místní úložiště?

Místní úložiště je součástí webového úložiště, které je samo o sobě součástí specifikace HTML5. Existují dvě možnosti ukládání dat do specifikace:

• Místní úložiště: ukládá data bez data vypršení platnosti a to je ten, který budeme používat, protože chceme, aby naše úkoly zůstaly na stránce co nejdéle.
• Uložení relace: pouze ukládá data pro jednu relaci, takže pokud uživatel zavře kartu a znovu ji otevře, všechna data budou pryč.

Jednoduše řečeno, vše, co ukládá webové úložiště, je ukládat pojmenované páry klíč / hodnota místně a na rozdíl od souborů cookie tato data přetrvávají, i když zavřete prohlížeč nebo vypnete počítač.

HTML

Pokud se zamyslíme nad seznamem úkolů, co budeme potřebovat, je:

• Vstup pro umístění našich úkolů.
• Vstupní tlačítko pro přidání našeho úkolu.
• Tlačítko pro vymazání všech úkolů.
• Zástupný seznam neobsazený seznam, kde se naše úkoly umístí do položek seznamu.
• A konečně potřebujeme zástupný symbol div, který by zobrazil upozornění, když se pokusíte zadat prázdné místo.

Takže náš HTML by měl vypadat takto:

  
      Clear All  
  
  

Je to docela standardní zástupný HTML kód a pomocí javascriptu můžeme toto vše naplnit dynamickým obsahem.

Protože v tomto příkladu použijeme jQuery, měli byste jej také zahrnout do dokumentu HTML.

JavaScript

Pokud přemýšlíme o struktuře jednoduché aplikace, je třeba nejprve zkontrolovat, kdy uživatel klikne na tlačítko pro přidání a zkontroluje, zda má vstup prázdnou hodnotu, například:

$('#add').click( function() {var Description = $('#description').val();//if the to-do is emptyif($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}

Jediné, co jsme udělali, bylo zkontrolovat kliknutí na tlačítko pro přidání a spustit jednoduchý test, aby zjistil, zda uživatel naplnil vstup něčím. Pokud tomu tak není, výstraha div se rozplyne a zůstane na 1000 ms a pak zmizí. Nakonec vrátíme falešný kód, takže prohlížeč nečte zbytek skriptu a přesto přidá položku seznamu.

Další věc, kterou musíme provést, je vložení položky seznamu s hodnotou ve vstupu a my to předem nastavíme tak, že když uživatel přidá to-do, bude vždy jít na začátek seznamu a pak uložit tuto položku seznamu místního úložiště, například:

   // add the list item$('#todos').prepend("
" + Description + "
");// delete whatever is in the input$('#form')[0].reset();var todos = $('#todos').html();localStorage.setItem('todos', todos);return false;});

Jak můžete vidět, že je to docela standardní jQuery a pokud jde o místní úložiště, musíme uložit klíč a hodnotu. Klíč je jméno, které jsme nastavili pro sebe, a v tomto případě jsem ji nazval todos a pak musíme specifikovat, co vlastně chceme zachránit, a v tomto případě to je všechno HTML, který je umístěn uvnitř todos neusporiadaného seznamu . Jak můžete vidět, prostě jsme uchopili, že používáme jQuery a nakonec jsme vrátili falešný kód, takže formulář nepředloží a naše stránka se znovu načte.

Dalším krokem je zkontrolovat, zda máme v našem zařízení něco uloženého v místním úložišti, a pokud to uděláme, musíme jej umístit na stránku, a proto, když jsme našemu klíči dali název todos, musíme zkontrolovat jeho existenci takto:

// if we have something on local storage place thatif(localStorage.getItem('todos')) {$('#todos').html(localStorage.getItem('todos'));}

Použili jsme jednoduché příkaz if to zkontrolovat a pak jsme získali to, co máme v místním úložišti, a místo toho jako HTML seznamu neuspořádaných úkolů.

Pokud testujete naši jednoduchou aplikaci a znovu načteme stránku, uvidíme, že už funguje a zbývá jen vytvořit funkci, kdy se uživatel rozhodne vymazat všechny úkoly; kdy se tak stane, vymažeme všechny lokální úložiště, znovu načteme stránku, abychom provedli změny, a pak vrátit falešnou hodnotu, aby se zabránilo hašování před adresou URL, jako je například:

// clear all the local storage$('#clear').click( function() {window.localStorage.clear();location.reload();return false;});

Díky tomu jsme naši aplikaci plně pracovali. Celý kód vypadá takto:

$('#add').click( function() {var Description = $('#description').val();if($("#description").val() == '') {$('#alert').html("Warning! You left the to-do empty");$('#alert').fadeIn().delay(1000).fadeOut();return false;}  $ ('# todos') prepend (" 
  "+ Popis +" 
  "); $ ('# form') [0] .reset (); var todos = $ ('# todos'); html (); pokud (localStorage.getItem ('todos')) {$('#todos').html(localStorage.getItem('todos'));}  $ ('# clear') .klikněte (function () {window.localStorage.clear (); location.reload (); return false;}); 

Podpora prohlížeče

Podpora webového úložiště je velmi dobrá pro specifikaci HTML5; to je podporováno všemi hlavními prohlížeči a dokonce i IE8, takže jediná věc, na kterou byste se možná měla bát, je IE7, pokud to ještě podporuje.

Závěr

Místní úložiště v malých aplikacích, jako je tento, může velmi vítat náhradu databází. Ukládání malého množství dat nemusí být složité.

Jak ukládáte data z jazyka JavaScript? Upřednostňujete soubory cookie nebo databáze na místní úložiště? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, obraz úložiště přes Shutterstock.