Embed Size (px)
Citation preview
Dr Nenad Kojić
HTML 5 je najnovija verzija HTML-a
Dolazi kao naslednik HTML 4.01 i xHTML-a 1.1
Unosi velike promene u odnosu na HTML 4
Dolazi sa novim tagovima, karakteristikama i API-jima
Na drugačiji način posmatra standardni pristup statičkom
web-u
Mnogo interaktivniji sa CSS-om i Java script-om, nego što je to bio HTML 4
Atraktivniji za krajnjeg korisnika
Problematičniji za programera jer nije podržan od svih browser-a
• 1989 – Berners-Lee predstavlja Internet-based hypertext system
• 1990 – Berners-Lee definiše HTML i pojam browsera
• 1993 – Prvi nacrt HTML-a i specifikacije • 1994 – HTML 2.0 specifikacija • 1994 – Formiranje W3C • 1995 – Nacrt HTML 3 • 1997 – HTML 3.2 specifikacija • 1998 – HTML 4.0 specifikacije • 2009 – HTML 5
91-92 93-94 95-
96
97-
98
99-
00
01-02 03-04 05-06 07-08 09-10 11-12 13-14
HTML 1 HTML 2 HTML 4 XHTML 1
HTML 5
CSS 1 CSS 2 T-less D Web 2.0 CSS3
JS ECMA, DOM
DOM 2 Ajax DOM, APIs
2004 WHATWG started
2008 W3C Working Draft
2012 (2010) W3C Candidate Rec
2022 W3C Rec
1996 – CSS 1 W3C Rec
1998 – CSS 2 W3C Rec
1999 – CSS 3 Proposed
2005 – CSS 2.1 W3C Candidate Rec
2001 – CSS 3 W3C Working Draft
HTML 5 CSS
XHTML je striktniji i čistiji od HTML-a
Ovo je posledica toga što je kod XHTML-a HTML definisan
kao XML
Obzirom na XML, svi tagovi se moraju ispravno zatvoriti i
pravilno ugnjezditi
Ovo važi i za tzv. neuparene tagove <br/>)
Sve vrednosti atributa moraju biti pod znacima navoda
size= px
Kao i XML i XHTML dokument mora početi DOCTYPE deklaracijom
Moraju postojati tagovi html, head i body, s tim što html ima i definisan imenski prostor
Početak fajla sa DOCTYPE deklaracijom, definiše da se ceo fajl tumači kao XML fajl, i samim tim mora da ukazuje na DTD fajl, u kome je opisana struktura tog proizvoljnog XML dokumenta
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Sve ovo je sa ciljem da se pokuša prevazulaženje različitih tumačenja browsera pojedinih tagova ili atributa, obzirom da se
sada definiše jedinstven XML dokument, čija pravila ponašanja su definisana u DTD fajlu
Obzirom na broj promena koje HTML5 donosi, kao i promenu logike prema skript jezicima i skladištenju podataka, HTML5 je nova generacija HTML, a ne samo nova verzija
Formalno, tek 2008. godine je objavljen prvi nacrt predloga HTML5 od strane W3C
Primarni problem je što ga ne podržavaju svi browseri, a naročito ne sve verzije pogotovo ranije
Nezvanično HTML ≈ HTML + CSS + JavaScript Na ovaj način HTML je alat za:
Označavanje - Markup (HTML 5)
Prikazivanje - Presentation (CSS 3)
Interakciju - Interaction (DOM, Ajax, APIs)
Razumljiv svim browser-ima
Nije zamišljen za upravljanje audio i video fajlovima
Ne podržava skladištenje, van lokalnog računara ili lokalne mreže
Ne podržava validaciju podataka
Ne podržava interaktivno crtanje Ne odgovara zahtevima savremnih korisnika
Nije razumljiv svim browser-ima
Napravljen za rad sa audio i video fajlovima
Podržava skladištenje van mreže
Donosi nove tagove, atribute i funkcionalnosti Omogućava da se podebnim tagovima drefiniše tip sadržaja, kako to
korisnik vidi
Podržava interaktivno crtanje Podržava različite tipove unosa u formulare i validaciju istih
HTML
HTML5
Novi elementi za definisanje strukture web stranice (<header>, <footer>, <nav>...)
Novi elementi u formama i mogućnost validacije na klijentskoj strani
Rad sa multimedijalnim fajlovima (audio i video kontrole)
API-ji za grafiku i crtanje
Skladištenja podataka
Geo-lokacije
Mogućnost Drag & Drop-a
Offline aplikacije
...
<section>, <article>, <aside>, <hgroup>, <header>, <footer>, <nav>, <figure>, <figcaption>, <video>, <audio>, <source>, <embed>, <mark>,
<progress>, <meter>, <time>, <ruby>, <rt>, <rp>, <wbr>, <canvas>, <command>, <details>, <summary>, <datalist>, <keygen> i <output>
Jedan od ključnih je tag input, kome se menja vrednost atributa type i na taj način omogućava validacija
Pored njega, unapređeni su i tagovi <a> <hr> <cite> <strong>
Neki od <input> type vrednosti: •color •date •datetime •datetime-local •email •month •number •range •search •tel •time •url •week
Kod
HTML 4.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W C//DTD XHTML . Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 <!DOCTYPE html>
HTML 4.01
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
HTML5
<meta charset="utf-8">
U HTML se pojavljuju novi elementi kojima se vrši struktuiranje sadržaja strane
Do sada se radilo tagom div, i njemu pridruženim CSS om
Sada se definisnai novi tagovi, jer se analizom pokazalo da
najveći broj strana ima slične strukture i slično definisane nazive atributa id ili class
Očekuje se da će ovo biti jednostavnije ali i bolje definisana materija za web pretraživače
Novi elementi za struktuiranje sadržaja su: header, nav, figure, figcaption, article, summary, details, section,
aside, meter, footer, mark i wbr.
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
div id="header"
Navi
gati
on
Main Side
bar
div id="footer"
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
header
nav Main aside
footer
Header tag, unutar body taga, definiše zaglavlje dokumenta ili sekcije
Tipično, sadrži h tag
Primer
<header>
<h1>Ovo je header</h1>
<p class="tagline">Ovo je dodatni tekst u header-u</p>
</header>
Tag nav definiše deo sajta u kome se nalazi navigacija
Najčešće je to HTML lista sa ul i li tagovima, da bi se pomoću CSS-a i jQuery-ja mogla estetski lako urediti
Primer
<nav>
<ul> <li> <a href="index.html"> Početna strana </a> </li>
<li> <a href="galerija.html"> Slike</a> </li>
<li> <a href="lokacija.html"> Lokacija</a> </li>
</ul> </nav>
Footer tag, unutar body taga, definiše kraj dokumenta ili sekcije
Tipično, sadrži tekst ili tekstualnu navigaciju Opšta specifikacija, kao i kod taga header, podrazumeva
jedan tag footer kao dete taga body , dok ih može biti više ako su to oznake završetka pojedinih sekcija, kao sadržaja centralnog dela sajta
Primer
<footer class= stil1 > Ovo je footer </footer>
Obzirom da pretraživači vole tekstualnu navigaciju u footer-u, često se koristi kombinacija nav i footer taga
<footer role=“footer_info">
<p>
Footer text i vlasnička prava
</p>
<nav>
<h6>Quick Links</h6>
<ul>
<li>
<a href="#">link 1</a>
</li>
</ul>
</nav>
</footer>
Ova dva nova taga treba da ukažu na logički način grupisanja formalnog sadržaja namenjenog korisniku
Iako nije striktno definisano kada ide jedan a kada drugi,
dosadašnje iskustvo definiše sledeće preporuke: Tag section treba koristiti kada se strana ili deo strane logički struktuira, i
kada definiše neku logičku celinu
Tag article se koristi kada je sadržaj koji on sadrži jedinstven i koncizno definisan
Možda je nabolje poređenje primene ova dva taga sa štampanim novinama: U
novini postoji više sekcija Zabava, Kultura, Vesti iz zemlje, Pitanja čitalaca i sl. . Svaka od ovih sekcija ima više članaka article unutar sebe. Na taj način unutar taga section ima se jedan ili više taga article.
Međutim, neki članak article može imati više segmenata Više pitanja i odgovora o gajenju cveća , pa je unutar njega novi section, sa novim brojem tagova article Konkretno pitanje čitaoca i odgovor urednika
Obzirom da bi article trebao da ima neki konkretan i jedinstven sadržaj, često je njegov sastavi deo neki header, sadržaj i footer.
<article> <header> <h1> Plac na Avali </h1> <p> Agencija Placevi</p> </header> <p> Prodajem plac na Avali .... </p> <img src="" /> <footer> Za dodatne informacije pogledajte sajt <a href=""> aaa </a> ili
pozovite na 222222 </footer> </article>
Još jedan od primera kako razlikovati section i article je
rokovođenje RSS-om
Naime, sve ono što se želi emitovati kroz RSS je ono što bi trebalo da bude u tagu
article
Header
Navigation
Aside
Footer
Section
Article
Footer
Article
Footer
Article
Footer
Kako je na web-u izuzetno zastupljena forma bloga, foruma
itd. gde se masovno ostavljaju komentari opisani autorom i
datumom, logično je očekivati da se i način definisanja datuma tj. Vremena uniformiše tagom
Tag time se koristi za definisanje datuma i vremena i za
mašinu i za čoveka
Atribut ovog taga koji sadrži ključni sadržaj je datetime
Sintaksa za datum je YYYY-MM-DD, dok je za vreme
HH:MM:SS
Oznaka T koristi se da bi se razdovili datum i vreme, ako se
oba prikazuju
Na kraju ide Z – oznaka vremenske zone
<time datetime= -11- > . Novembar 2012 </time>
<time datetime= : > časova </time>
<time datetime= -11-15T15:00 > . Novembar 2012
</time>
<time datetime= -11-15T15:00:22.4 +00:00 > . Novembar 2012 </time>
Pored osnovnog taga, time ima i novi atribut pubdate koji unakuje da je to datum objavljivanja određenog teksta
<article> <header> <h1> Plac na Avali </h1> <p> Agencija Placevi</p> <time datetime= -11-15T15:00 pubdate> 15. Novembar 2012 </time> </header> <p> Prodajem plac na Avali .... </p> <img src="" /> <footer> Za dodatne informacije pogledajte sajt <a href=""> aaa </a> ili pozovite na
222222 </footer> </article>
Ovaj element predstavlja deo neke celine a sa druge strane je
celina za sebe, i najčešće ukazuje na glavni sadržaj, ali može biti van njega
Često se koristi kao deo kojim se najavljuje cela vest
Može se iskoristiti i za skraženi oblik reklamiranja nekog proizvoda
Obzirom da sadržaj taga aside ukazuje na tag u kome se asige nalazi, često se može koristiti za izdvajanje citata iz celokupnog teksta, mišljenja korisnika o proizvodu, predistoriji koja je vezana za neki događaj i slično
Koristi se kada se pored naslova želi istaći i pod naslov
Kako SEO voli h tagove, sada je to moguće uraditi u kombinaciji dva ili više taga, a njihovu grupu nekako ounačiti da pripada istoj logičkoj celini
<hgroup>
<h2> Sutra novi popusti </h2>
<h4> Patike i cipele po dodatnih 20% popusta</h4>
</hgroup>
Ovim tagom postiže se efekat isticanja teksta, na isti način kao kada se markerom neki tekst oboji u štampanoj strani
<body>
Deo teksta koji je <mark> markiran </mark>
</body>
Figure je tag koji treba da ukaže na neki objekat slika, video, animacija, flash, ...)
Dodatni tag, figcaption, služi da prikaže ime objekta ili opis objekta. Pozicija taga figcaption može biti ispred ili iza samog objekta.
<body>
<figure>
<figcaption>Ime slike</figcaption>
<img src="1.jpg" >
</figure>
</body>
Novi tag kojim se u grafičkom režimu prikazuje napredak određenog procesa
Primer
Napredak <progress value="70" max="100"></progress>
Vrlo slično tagu progress, funkcioniše i novi tag meter. Ovaj tag za razliku od taga progress, koristi se samo kada se zna
minimalna i maksimalna vrednost.
Primer
<meter min="0" max="10" value="7">7 of 10</meter>
Ova dva taga omogućavaju inicijalno grupisanje i sakrivanje grupe teksta, koja se nalazi u tagu details, i prikaz samo dela koji je u tagu summary. Aktivacija preostalog teskta se realizuje klikom miša na uokvireni tekst.
Primer <body> <details> <summary>Kratak opis</summary> <p> Tekst 1 koji pripada ovom segmentu </p> <p> Tekst 2 koji pripada ovom segmentu </p> </details> <p> Neki tekst </p> </body>
Tag bdi služi za označavanje bidirekcionog teksta. Ovim se postiže ispravno tumačenje pisama koja se realizuju s leva na desno (npr. srpski) ali i s desna na levo (npr. arapski)
Tagovi <ruby>, <rt> i <rp> se najčešće koriste kada se pojavi potreba za dodatnim tumačenjem pojedinih termina u nekom od azijskih jezika
Tag <wbr> daje mogućnost da browser može da umetne novi red, na određenom mestu, ako je to potrebno.
Novi tipovi , elementi i atributi
U HTML dostupni su sledeći tipovi za elemente forme: button , checkbox, file, hidden, image, password, radio, reset, submit i text
Posebna pažnja u HTML posvećena je tagu input, i njegovim novim tipovima. Sada postoji novih input tipova kojima se specificira tip sadržaja. Na taj način HTML5 kroz nove tipove radi automatsku validaciju .
Novi input tipovi su:
a) search b) email
c) url
d) tel
e) datetime
f) date g) month
h) week
i) time
j) datetime-local
k) number
l) range
m) color
Search
<input type="search">
<form>
<input type="email" name="usermail" />
<input type="submit">
</form>
Stavljanjem , iza email-a, dozvoljen je unos više mail adresa, uz stavljanje atributa multiple
Validacija se vrši submit-ovanjem forme
Url <form> <input type="url" name="url" /> <input type="submit"> </form> Validacija se vrši submit-ovanjem forme
Tel <form> <input type="tel" name="tel" /> <input type="submit"> </form> Ovaj tip podataka dozvoljava vrlo fleksibilan format, jer su
formati telefonskog broja vrlo različiti
Date
<form>
<input type="date" name="proba">
<input type="submit">
</form>
Time
<form>
<input type="time" name="proba">
<input type="submit">
</form>
Na isti način kao i date tj. time, koriste se i datetime, month ili week.
Njima treba da se ograniči unos datuma i vremena, tj. meseca ili sednice.
Za veliki broj browsera postoji problem za prikaz ovih tipova
input taga
number
<form>
<input type="number" name="broj" />
<input type="submit">
</form>
Range
<form>
<input type="range" min="1" max="10" name="ocena" >
<input type="submit">
</form>
color
<form>
<input type="color" name="boja" />
<input type="submit">
</form>
U HTML5 se pojavljuju tri nova taga za potrebe formi
1. datalist
2. keygen
3. Output
Tag datalist najviše odgovara tagu select, i koristi se u kombinaciji sa tagovima option.
Ovaj tag nema grafičku vizuelizaciju, i služi da ponudi definisane opcije kao sadržaj tekstualnog polja.
To zahteva definisanje tekstualnog polja i njegovo vezivanje sa listom (datalist). Ova veza je preko atributa list (u input tagu) i atributa id (u datalist tagu).
<form> <input type="text" list="moja_lista" /> <datalist id="moja_lista" > <option value="ABV" /> <option value="123" /> <option value="XYZ" /> </datalist> </form>
Glavni razlog za uvođenje ovog taga je omogućavanje sigurnog načina autentifikacije korisnika
<keygen name="security" />
Ovaj tag definiše dva ključa, trenutkom submit-ovanja, i to
javni i privatni
Privatni se skladišti lokalno, dok se javni šalje na server
Javni se npr. može koristiti za pravljenje klijentskog sertifikata za autentifikaciju korisnika
Ovaj novi tag omogućava prikaz neke vrednosti koja je dobijena kao rezultat neke logike ili operacije. U HTML4, ovo
je moglo da se realizuje jedino primenom JavaScript-a, dok
je sada ta integracija spustena na novo HTML-a
Primer integracije sa tipom range, sa ciljem prikaza trenutne
vrednosti
<form oninput="vrednost.value=opseg.value" >
<input type="range" name="opseg" id="opseg" />
<output id="vrednost"> Izaberite vrednost </output>
</form>
Pored novih tagova i tipova u HTML5 su se pojavili i novi atributi,
koji su dodeljeni različitim tagovima, sa ciljem većeg konforma i programera i korisnika
Kao i sve drugo, i atributi ne rade u svim browserima i svim
verzijama
Spisak novih atributi i browser-i u kojima rade je
Ovaj atribut omogućava da se korisniku ponudi sadržaj koji je ranije uneo, ukucavanjem prvih karaktera tog sadržaja
Može se primeniti na input ili form tag
Vrednost za aktivaciju je on a zabranu off
<form >
<input type="text" name="opseg" autocomplete="on" />
</form>
Ovaj atribut omogućava da se po učitavanju stranice izvrši fokus na određeni element forme npr. kursor trepće u text polju i na taj način korisniku skrene pažnja da se od njega očekuje unos sadržaja u tom elementu forme.
<form >
<input type="text" name="opseg" autofocus />
</form>
Ovaj atribut omogućava da se element koji se fizički nalazi vane neke forme, taga <form> i </form>, pridruži baš toj formi.
Ovo je moguće tako što će se formi definisati id, a elementu koji treba da se toj formi pridruži, atribut form, sa vrednošću prethodno definisanog atributa id.
<form id="forma1">
<input type="text" name="opseg" autocomplete="off" autofocus />
</form>
<input type="text" form="forma1"/>
U HTML pojavljuje se potpuno drugačija logika definisanje pojedinih atributa elementima forme, koji su do sada isključivo pripadali tagu form
Uz to, uvodi se i pojam override, u slučaju kada element forme ima novi atribut. Na ovaj način, iako nadređeni tag form ima neko pravilo, tag unutar forme može to da promeni override-uje).
Do sada su se kao atributu taga form pojavljivali action, method a
sada je moguće definisati i target i validaciju
Ovo je moguće uraditi kroz nove atribute taga input: formaction (type="submit" i type="image")
formmethod (type="submit" i type="image")
formnovalidate () (type="submit")
formtarget ()
Ova dva atributa definišu opseg dozvoljenih vrednosti prilikom unosa
Primenili smo ih ranije kod tipa range ili number
Mogu se primeniti i kod tipa date
< input type= date min= -11- max= -11- />
Pored ova dva, uveden je i atribut step kojim se definiše korak promene neke vrednosti koja je automatska. Najšeće se primenjuje kod tipa number ili time
Ovaj atribut omogućava da se u postupku submitovanja iz jednog elementa forme prosledi više parametara
Koristi se za tip file i email, gde se razdvajanje vrši zarezom
<input type="file" multiple="multiple" />
Na ovaj način korisnik može da prosledi više podataka, sa jednim elementom forme
Aktiviranjem ovog atributa, definiše se pravilo da se prikikom submitovanja forma neće vršiti validacija njenih elemenata bez obzira ako su prethodno na pojedinačnim elementima validacije eksplicitno definisane
Ovaj atribut omogućava da programer sam napiše svoj regularni izraz pravilo po kome će se vršiti validacija nekog unetog sadržaja
U suprotnom, ostaje da se samo koriste već definisana pravila koja su dodeljenea novim tipovima input taga (email,
number, time, ...)
U slučaju da se želi ograničiti unos samo na četiri cifre
<input pattern= [ -9]{ } name= cifre title= cetiri cifre />
Ovaj atribut koristi se za definisanje nekog kraćeg teksta koji će se prikazati korisniku u nekom elementu forme za duže koristiti atribut title)
Ovaj tekst je obično bleđe boje od inicijalne i nestaje kada korisnik mišem klinke u to polje da unese svoj sadržaj
<input type="text" name="first_name" placeholder="Your
first name...">
Ukoliko se ovaj atribut definiše u nekom elementu formulara, onda je označeno da je obavezan unos sadržaja u taj element
Ukoliko korisnik ne unese sadržaj a pokuša da submituje formu, doći će do greške.
Ovaj atribut je vrlo sličan atributu desabled
Na ovaj način korisniku se onemogućava da edituje neki element forme
U verziji HTML došlo je do ukidanja nekih tagova iz verzije HTML4 (applet, basefont, big, center, dir, font, frame, frameset, strike, u, ...)
Pored toga, dodati su potpuno novi tagovi, o kojima je delom bilo reči i do sada
Kao treća varijanta pojavljuju se redefinisani tagovi. To su tagovi koji su postojali i u HTML4 ali koji su sada dobili dodatne mogučnosti u smislu sintakse i primene u konkretnom kodu
Za svaki od ovih tagova omogućena je manja ili veća promena, koja se detaljno može pročitati u preporukama
Neki od tagova koji su redefinisani su: address, cite, dl, em, i, hr, ol, s, small, strong, b, u, ...
Primer
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
• <video> i <audio>
• <canvas>
• Geo Lokacija
• Web storage
• Web SQL baza
• Drag&drop
• Microdata ()
Audio i video
U HTML mogućnost reprodukcije bila je većinski bazirana na plugin-ovima, što može da predstavlja problem
Dodatni problem je sa video formatima, kada se kontrola
video fajla mogla raditi samo u slučaju kada postoji konkretno okruženje ili format čiji player to omogućava. Iz tog razloga najčešći formati su bili Flash ili Quicktime
Formati koje podržava HTML su: Audio (.ogg, .mp3, .wav)
Video (.mpg4, .ogg, .webm)
U HTML5 uveden je novi tag audio, za potrebe reprodukcije
audio fajlova
<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
Za reprodukciju video fajlova uveden je novi HTML5 tag koji
se zove video
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Audio i video
Novi API, Canvas, omogućava da se direktno u sajtu vrši crtanje različitih oblika, kroz Java Script.
Canvas, platno, omogućava da se u dvodimenzionom prostoru vrši renderovanje nekih objekata i slika
Postoji veliki broj JavaScript funkcija koje se koriste za
predstavljanje pojedinih linija i oblika
Uz to, postoji veliki broj metoda za različite transformacije, oblike, predstavljanje i rad sa objektima i slikama
Geolocation omogućava posetiocima sajta, da uz njihovu saglasnost, pratite njihovo kretanje i njihovu lokaciju
Praćenje može da se realizuje preko:
■ IP address
■ wireless network connection
■ cell tower
■ GPS hardware on the device
Geolocation API može da se kontroliše kroz tri metoda:
getCurrentPosition
watchPosition
clearPosition
Princip rada:
Proveriti da li je Geolocation podržan
Ako je podržan, potrebno je pokrenuti metod getCurrentPosition()
Ako je pokretanje metoda getCurrentPosition() bilo uspešno, kao rezultat će se dobiti koordinate
Nakon toga, metod showPosition() prikazuje Latitude i Longitude
Web Storage API je standard za lokalno snimanje podataka
Postoje dve vrste skladištenja podataka: session Storage
Local Storage
Snimanje u sesijama je snimanje podataka na strani servera, dok se
lokalno skladištenje realizuje na strani korisničkog računara
Do sada je skladištenje na strani klijenta bilo u formi kolačića tekstualni fajl veličine KB
Problem sa kolačićima je što se šalju serveru sa svakim HTTP request-
om, dok se kod Local Storage podaci snimaju i stoje na klijentskom
računaru sve dok ih neko ne zatraži Druga bitna razlika, je što je kod Local Storage omogućeno skladištenje
u fajlu veličine MB
Podaci se snimaju u formi key/value
Primer:
key: email, value: [email protected]
Skladištenje key/value para (bez obzira da li je to local or session storage ) se realizuje pomoću setItem dok je dohvatanje value, na bazi poznatog key,
pomoću getItem.
Na primer, ako se snima vrednost , za ključ primer localStorage.setItem("primer", "10");
Dohvatanje skladištene vrednosti realizuje se kao: var size = localStorage.getItem("primer");
Moguće je koristiti i skraćenu sintaksu
var size = localStorage["size"];
U HTML uvedena je mogućnost da se pomoću Java Scripta komunicira sa bazom podataka
Ova mogućnost se ranije vezivala samo za serverske jezike, a od sada to može da se uradi i preko klijentskog jezika
Dr Nenad Kojić
