Testowanie localStorage, embedded gist i CoffeeScript

Mamy niedzielę, więc warto trochę popro­gra­mo­wać dla sportu (oczy­wi­ście zamiast upra­wia­nia „normal­nego” sportu :-) ). Z głupoty chcia­łem rozpra­co­wać kilka rzeczy. Przede wszyst­kim wpra­wić się trochę w Coffe­eScript, a przy okazji spraw­dzić w dzia­ła­niu zapi­sy­wa­nie danych po stro­nie prze­glą­darki przy użyciu local­Sto­rage.

Moim dzisiej­szym zamia­rem było stwo­rze­nie strony z formu­la­rzem, w którym wpisy­wane warto­ści zapi­sy­wa­łyby się na bieżąco po stro­nie prze­glą­darki wpisu­ją­cego. Powiedzmy, że jakaś sierotka podczas wypeł­nia­nia formu­la­rza zamknie kartę/przeglądarkę i całe mozolne wpisy­wa­nie poszło w las. Dzięki local­Sto­rage wpisane dane nie zostaną skaso­wane, a formu­larz wypełni się auto­ma­tycz­nie. Oczy­wi­ście niesie to za sobą szereg niebez­pie­czeństw, jak np. co w przy­padku kogoś korzy­sta­ją­cego z publicz­nego kompu­tera, chcą­cego zamó­wić coś w skle­pie inter­ne­to­wym i mu się nagle „odwi­dzi”? Następna osoba dosta­nie dane osobowe poprzed­nika na tacy. Mini­mal­nym zabez­pie­cze­niem byłby mecha­nizm kasu­jący dane jeśli są sprzed dłużej niż np. 2 minut.

Dodat­kowo chcia­łem zrobić przy­cisk, który daje jakąś kontrolę nad prze­cho­wy­wa­nymi danymi. Efekt można sobie oglą­dać tutaj.

Używana przeze mnie wtyczka do kolo­ro­wa­nia składni (WP-Syntax) nie obsłu­guje CS. Zamiast tego kod umiesz­czę za pomocą embed­ded gist z GitHub. Efekt jest bardzo ładny. Poni­żej „mózg” formu­la­rza:

Efektu kompi­la­cji nie poka­zuję. Jeśli ktoś bardzo chce to może sobie podej­rzeć plik storager.js.

Jeśli szukasz biblio­teki backupu danych formu­la­rza w czasie rzeczy­wi­stym opar­tego o local­Sto­rage to pole­cam wtyczkę jQuery: Sisy­phus.

Podobne wpisy:

  1. Creating EAN-13 barcode using Coffe­eScript and HTML5 Canvas
  2. Tworze­nie pakie­tów ICMPPHP
  3. Wygrze­bane z GitHuba (4) : PHP User Agent
  4. Light­box bez użycia linków, rel i title

One comment

  • thek
    18 kwietnia 2012 - 22:12 | Permalink

    Szcze­rze mówiąc wale­nie kolej­nej biblio­teki (Moder­nizr) jedy­nie po to by spraw­dzić czy local­Sto­rage jest obsłu­gi­wane to jak strze­la­nie do muchy z armaty. Można to zrobić w zwykłym JS po prostu spraw­dza­jąc istnie­nie local­Sto­rage i jego popraw­no­ści. Można na przy­kład tak…
    http://mathiasbynens.be/notes/localstorage-pattern
    ale najba­nal­niej­szym spraw­dze­niem jest zwykłe…

    if(typeof(Storage)!==„undefined”)

    No ale takie spraw­dze­nie ma swoje minusy, bo co jeśli ktoś ma akurat taką klasę w kodzie? Stąd jednak lepiej zdać się potem na spraw­dze­nie czy faktycz­nie mamy do czynie­nia z praw­dzi­wym storge, co było zapre­zen­to­wane w linku ciutkę wyżej.

    Ale by było cieka­wiej to… można użyć do tego rozwią­zań, które dzia­łają nieza­leż­nie od obec­no­ści local­Sto­rage. Przy­kła­dem takiego czegoś jest jSto­rage, który używa local­Sto­rage jeśli może, ale w przy­padku star­szych prze­glą­da­rek ma swojego fall­backa, czyli zadziała i tak (choć w zależ­no­ści od prze­glą­darki ma różną pojem­ność na zmienne).

    Inna sprawa o której niewiele osób wspo­mina… Imple­men­ta­cja local­Sto­rage w prze­glą­dar­kach które go obsłu­gują nie potrafi prze­cho­wy­wać obiek­tów. Robi to tak jak cookies, czyli w postaci pary klucz i wartość (gdzie wartość jest strin­giem). Tym samym najle­piej rozsze­rzyć sobie klasę Storage dopi­su­jąc proto­type, które zapi­suje obiekty z użyciem choćby strin­gify klasy JSON i w przy­padku odczytu string parsuje. Ja zrobi­łem sobie tak:

    Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
    }

    Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
    }

  • Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.

    Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong>