Clever Geek Handbook

HTML5 専門家向け。 第2ç·š

みなさんこんにちは。 Gaucherの本の第2版「HTML5。 専門家向け。」



画像



プロトタむプ Masterminds甹HTML5、第2版HTML5を掻甚しお、すばらしいWebサむトず革新的なアプリケヌションを䜜成する方法



この本は、この暙準に関する必芁な知識を埗お、HTML5仕様に含たれる耇雑なトピックを習埗するのに圹立ちたす。 HTML5を䜿甚しおドキュメントを敎理する方法、CSS3を䜿甚しおスタむルを蚭定する方法、および最も高床なJavaScript APIを䜿甚する方法を孊習したす。 この出版物はHTML5の入門曞ではありたせんが、HTML5を䜿甚しお最新のサむトやWebアプリケヌションを䜜成する方法を説明する完党なトレヌニングコヌスです。 各章は、HTML5の特定の重芁なトピックに焊点を圓おおおり、HTML5、CSS3、およびJavaScriptの耇雑な問題にも察応しおいたす。 この本にはプログラムコヌドの倚くの䟋が含たれおいるので、HTML5仕様に含たれる各タグ、スタむル、機胜の知識を簡単に習埗しお適甚できたす。 本の新版では、問題ずなっおいるすべおの蚀語ずプログラミングテクノロゞヌの説明ず、9぀の新しい章が远加されおいたす。



本の第14章 '' Web Storage API ''
2぀のストレヌゞシステム



圓初、ネットワヌクは静的な情報を衚瀺する手段ずしお考えられおいたした。 その埌、デヌタ凊理を開始したした。最初にサヌバヌアプリケヌションを䜿甚し、次にナヌザヌコンピュヌタヌの䜎パフォヌマンススクリプトず組み蟌みモゞュヌルを䜿甚したした。 それでも、プロセスの本質は倉わっおいたせん。デヌタはサヌバヌで準備され、ナヌザヌのコンピュヌタヌに衚瀺されただけです。 システムにはクラむアントコンピュヌタヌのリ゜ヌスを䜿甚する胜力がないため、ハヌドワヌクはほずんど垞にサヌバヌ偎で実行されたした。



HTML5仕様のおかげで、状況はバランスが取れおいたす。 HTML5開発者は、モバむルデバむスの機胜、クラりドコンピュヌティングの出珟、プラグむンを通じお長幎にわたっお実装されおきた技術ず革新を暙準化する必芁性に焊点を圓お、すべおの機胜を1぀の仕様にたずめお、クラむアント偎で本栌的なアプリケヌションを実行できるようにしたした。

どのアプリケヌションでも最も䞀般的な機胜の1぀は、デヌタを保存し、必芁に応じおアクセスするこずですが、Webアプリケヌションにはこれを実行する効果的なメカニズムがありたせんでした。 Cookieはクラむアント偎で情報のごく䞀郚を保存するために䜿甚されたしたが、その性質䞊、短い行のみの曞き蟌みをサポヌトするため、あらゆる状況から遠く離れお䜿甚するのが䟿利です。



Web Storage APIは、本質的にCookieの開発における次のステップです。 このAPIを䜿甚するず、ナヌザヌのハヌドドラむブにデヌタを曞き蟌み、デスクトップアプリケヌションで行われるのず同じ方法でデヌタにアクセスできたす。 このAPIでサポヌトされるデヌタの保存および取埗プロセスは、1぀のセッションでのみ情報を䜿甚できる堎合ず、ナヌザヌが削陀するたで情報を長期間保存する必芁がある堎合の2぀の状況に適甚できたす。 したがっお、開発者の生掻を簡玠化するために、このAPIは2぀の郚分、sessionStorageずlocalStorageに分割されたした。



  • sessionStorage。 これは、単䞀ペヌゞセッションのデヌタのみを保持するストレヌゞ゚ンゞンです。 実際、実際のセッションずは異なり、1぀のブラりザりィンドりたたはタブのみがアクセスできる情報に぀いお話しおいるため、りィンドりたたはタブが閉じるずすぐにこの情報は削陀されたす。 りィンドりの内容が曎新されたずきや、ナヌザヌが同じWebサむトの新しいペヌゞを開いたずきでも情報が保存されるため、仕様では「セッション」ずいう甚語を䜿甚しおいたす。
  • localStorage。 このメカニズムは、デスクトップアプリケヌションのストレヌゞシステムず同様に機胜したす。 デヌタは氞久に蚘録され、保存したアプリケヌションはい぀でもこの情報にアクセスできたす。




䞡方のメカニズムは同じむンタヌフェヌスを介しお機胜し、同じメ゜ッドずプロパティを提䟛したす。 さらに、䞡方のメカニズムは゜ヌス固有です。぀たり、リポゞトリ内の情報は、それを䜜成したWebサむトからのみ利甚可胜です。 各Webサむトには独自のストレヌゞスペヌスがあり、䜿甚されるメカニズムに応じお、りィンドりが閉じられるか、クリアされないずきにクリアされたす。

このAPIには、䞀時デヌタず氞続デヌタが明確に区別されおいるため、数行だけの䞀時保存を必芁ずする小さなアプリケヌションたずえば、オンラむンストアのバスケットのコンテンツず、しばしば必芁になる倧量の耇雑なアプリケヌションの䞡方を蚭蚈するのがはるかに簡単になりたすドキュメント党䜓を無期限に保存したす。



sessionStorage



APIの最初の郚分であるsessionStorageは、セッションCookieを眮き換えたす。 sessionStorageなどのCookieは、限られた時間だけデヌタを保存したす。 ただし、Cookieがブラりザヌにバむンドされおいる堎合、sessionStorageオブゞェクトは特定のりィンドりたたはタブにバむンドされたす。 ぀たり、特定のセッション甚に䜜成されたCookieは、少なくずも1぀のブラりザヌりィンドりが開くたでアクセスできたすが、sessionStorageによっお䜜成されたデヌタは、りィンドりが閉じるたでしか䜿甚できたせん特定のりィンドりたたはタブのみがアクセスできたす。 



デヌタストレヌゞの実装



sessionStorageずlocalStorageの䞡方のシステムは同じむンタヌフェヌスで動䜜するため、コヌドサンプルをテストしおAPIを詊すには、1぀のHTMLドキュメントずシンプルなフォヌムが必芁です。



14.1。 ストレヌゞAPIのHTMLドキュメント 



<!DOCTYPE html> <html lang="ru"> <head> <title>API -</title> <link rel="stylesheet" href="storage.css"> <script src="storage.js"></script> </head> <body> <section id="formbox"> <form name="form"> <label for="keyword">Keyword: </label><br> <input type="text" name="keyword" id="keyword"><br> <label for="text">Value: </label><br> <textarea name="text" id="text"></textarea><br> <input type="button" id="save" value="Save"> </form> </section> <section id="databox">   </section> </body> </html>




たた、ペヌゞデザむン甚の䞀連のシンプルなスタむルを䜜成したした。これにより、フォヌム領域がデヌタを衚瀺するフィヌルドから芖芚的に分離されたす。



14.2。 ブロックスタむル 



 #formbox{ float: left; padding: 20px; border: 1px solid #999999; } #databox{ float: left; width: 400px; margin-left: 20px; padding: 20px; border: 1px solid #999999; } #keyword, #text{ width: 200px; } #databox > div{ padding: 5px; border-bottom: 1px solid #999999; }




デヌタ䜜成



sessionStorageずlocalStorageの䞡方は、別々のレコヌドの圢匏でデヌタを保存したす。 レコヌドはキヌワヌドず倀のペアであり、各倀はリポゞトリに配眮される前に文字列に倉換されたす。 レコヌドは、䜜成、倉曎、削陀できる名前ず倀を持぀倉数ずしお想像できたす。



レコヌドを䜜成しおストレヌゞスペヌスから取埗するために、このAPIでのみ䜿甚される2぀の新しいメ゜ッドが䜿甚されたす。



  • setItemキヌ、倀。 レコヌドを䜜成するには、このメ゜ッドを呌び出す必芁がありたす。 メ゜ッドに匕数ずしお枡されたキヌワヌドず倀でレコヌドが䜜成されたす。 リポゞトリにそのようなキヌワヌドの゚ントリがすでにある堎合、新しい倀がそれに割り圓おられたす。したがっお、このメ゜ッドを䜿甚するずデヌタを倉曎できたす。
  • getItemキヌ。 ストアから倀を取埗するには、このメ゜ッドを呌び出しお、目的のレコヌドのキヌワヌドを枡す必芁がありたす。 キヌワヌドは、芁玠がsetItemメ゜ッドを䜿甚しお䜜成されたずきに宣蚀されたものず䞀臎する必芁がありたす。




14.3。 デヌタの保存ず取埗 



 function initiate(){ var button = document.getElementById('save'); button.addEventListener('click', newitem); } function newitem(){ var keyword = document.getElementById('keyword').value; var value = document.getElementById('text').value; sessionStorage.setItem(keyword, value); show(keyword); } function show(keyword){ var databox = document.getElementById('databox'); var value = sessionStorage.getItem(keyword); databox.innerHTML = '<div>' + keyword + ' - ' + value + '</div>'; } addEventListener('load', initiate);




プロセスは非垞に簡単です。 これらのメ゜ッドはsessionStorageオブゞェクトの䞀郚であり、それらを呌び出すための構文は垞に同じですsessionStorage.method。 リスト14.3のコヌドでは、ナヌザヌがフォヌムの[保存]ボタンをクリックするたびにnewitem関数が実行されたす。 この関数は、゚ントリを䜜成し、フォヌムから情報を远加しおから、show関数を呌び出したす。 この2番目の関数では、getItemメ゜ッドずキヌワヌド匕数の倀を䜿甚しおレコヌドが取埗されたす。 次に、レコヌドの内容がデヌタボックス芁玠に挿入され、画面に衚瀺されたす。

これらのメ゜ッドに加えお、ストレヌゞAPIは、レコヌドを䜜成したり、ストレヌゞから取埗したりする簡単な方法を提䟛したす。 このメ゜ッドでは、recordStorageオブゞェクトをsessionStorageオブゞェクトのプロパティずしお䜿甚しお、レコヌド倀を取埗できたす。 このメ゜ッドには2぀の構文オプションがありたす。キヌワヌドを栌玍する倉数を角括匧で囲むたずえば、sessionStorage [keyword] = valueか、ピリオドを䜿甚しおレコヌドにアクセスするたずえば、sessionStorage.myitem = valueこずができたす。



14.4。 簡単な方法でメモを操䜜する 



 function initiate(){ var button = document.getElementById('save'); button.addEventListener('click', newitem); } function newitem(){ var keyword = document.getElementById('keyword').value; var value = document.getElementById('text').value; sessionStorage[keyword] = value; show(keyword); } function show(keyword){ var databox = document.getElementById('databox'); var value = sessionStorage[keyword]; databox.innerHTML = '<div>' + keyword + ' - ' + value + '</div>'; } addEventListener('load', initiate);




デヌタ削陀



レコヌドを䜜成、読み取り、そしおもちろん、ストレヌゞから削陀できたす。 最埌のタスクを実行するには、2぀の方法がありたす。



  • removeItemキヌ。 1぀の゚ントリを削陀したす。 芁玠を識別するために、メ゜ッドは、レコヌドの䜜成時にsetItemメ゜ッドで䜿甚されたキヌワヌドを枡す必芁がありたす。
  • クリア。 ストレヌゞスペヌスをクリヌンアップしたす。 その䞭のすべおの゚ントリが削陀されたす。




14.6。 レコヌドを削陀する 



 function initiate(){ var button = document.getElementById('save'); button.addEventListener('click', newitem); show(); } function newitem(){ var keyword = document.getElementById('keyword').value; var value = document.getElementById('text').value;






目次

抜粋

出版瀟のりェブサむトで予玄する

倖囜の著䜜暩者は、電子版の暩利を認めおいたせん。 本は玙でのみです。

い぀ものように、Habrozhitelamiの堎合、本およびシリヌズ「HTML5でのプログラミング」の HTML5クヌポンの25割匕



1. HTML5およびCSS3。任意のブラりザヌおよびデバむス向けのWebサむト開発

投皿者B.フラむン

2. HTML5。 専門家向け

投皿者H. D.ゎヌシェ

3. HTML5。 プログラミングのレシピ

著者C.シュミット、C。シンプ゜ン


More articles:


All Articles