コース: WebアプリのためのHTML5 API 講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

データを管理する

データを管理する

このレッスンでは、Webアプリケーションで データを管理する方法について学びます 現在開いているサンプルは index.htmlというHTMLです ここには、3つのページが含まれています メインページはコースの一覧を表示しており いづれかのリンクをクリックした場合 その詳細ページに遷移します それぞれのコースは、コース名と ユニークなIDを持っています また合わせて、期間を示す長さ コースが認定につながるかどうかを示す トゥルーオアフォルスのフラグを持っています これが、アプリケーションが持つデータです これらのデータはローカルストレージに 格納されています これは、モバイルアプリケーションにおいて 非常に便利な技術で ローカルストレージにデータを追加し アプリケーションを終了してから 再度起動すると ローカルストレージから 保存しておいたデータを デバイスに読み込むことができます 例えば、新しいコースを追加してみましょう メインページに戻って 新しいコースを作成します ここでは、Cプラプラのコースを作ってみます 期間は5日間で 認定はトゥルーに設定して 保存ボタンをクリックします この時、内部では アプリケーションの中にある配列に 新しいコースの情報が格納されます また、その情報はローカル ストレージにも格納されます Webページを閉じて 再度開いてみましょう 新しいタブを作って先ほど開いていた アプリケーションを閉じます そして同じURLでもう一度 アプリケーションを開くと 追加したCプラプラのコースは 再度表示されています また、追加した情報の詳細も きちんと確認することができます それでは、実際にどのように 実装されているのかを見てみましょう エクスプローラを開きます サンプルファイルは 3つのファイルで構成されています ユーザーインターフェースは index.htmlの中に定義されています Webページの機能は uibehavior.jsに書かれています データを保存したり 読み込んだりするコードについては data.jsに書かれています このレッスンでは、data.jsの コードを見てみましょう エディタに切り替えます はじめにアプリケーションが起動したとき コードの中に埋め込まれた いくつかのコースが定義されています これは、グローバルな配列で…

目次