Web Storage の試作プログラム

Web Storageを用いれば、Webを閉じた後も、各種データを保存しておけます。

例えば、Webアプリの「学習システム」を考えた場合、Web Storageに「学習履歴」を保存することが可能になります。

今回、「学習システム」を念頭に置いた試作プログラム(プロトタイプ)を作りました。

Web Storage

SessionStorageとLocalStorage

Web Storageには、「SessionStorage」と「LocalStorage」の2種類があります。

SessionStorageは、セッションが終わる(Webを閉じる)と、その内容が消えてしまいます。

LocalStorageは、セッションが終わっても、その内容はローカルディスク上に残ります。

  • SessionStorage: セッションが終わると内容が消える
  • LocalStorage:  セッションが終わっても内容は残る

 

今回は、「LocalStorage」を利用します。

デバッガー

Web Storageは、Webブラウザーのデバッガーで、編集できます。

Fig.1 Chromeのデバッガー画面. Web Storage の表示.

 

Web Storageはデータを、「Key」と「Value」のペアとして保存します。

Fig.1では、保存データは以下のペアとなっています。

  • Key  : ”lessonData123”
  • Value: 97

 

(注)Chromeのデバッガー起動方法

  • Windowsの場合、「F12」キーを押す
  • Macの場合、「option」+「command」+「i」キーを同時に押す

 

 

プロトタイプ

 

プロトタイプの動き(仕様)

「学習システム」を単純化した仕様です。

  1.  レッスン開始: 「Lesson Start」ボタンをクリック
  2.  ・・・データ保存: Web Storageに新規データ { Key:”lessonData123”, Value: 0 } を保存
  3.  レッスン: 「Lesson!」ボタンでレッスンの成績(ダミーのスコア)を表示
  4.  ・・・データ更新: Web Storageのデータを更新
  5.  レッスン終了: 一旦、ブラウザを閉じる
  6.  レッスン再開: 「Lesson Start」ボタンをクリック
  7.  ・・・前回のスコアが残っていることを確認
  8.  ・・・データ消去: 「Remove Web Storage Data」ボタンをクリック

 

プロトタイプの主な機能
  • Web Storageに新規データを保存する
  • Web Storageにあるデータを消去する
  • Web Storageにあるデータを更新する

 

プログラム1

プログラム1の説明

body部

プログラム1 の 50行目、「Lesson!」ボタンをクリックすると、pseudoLesson()関数が起動

51行目、「Remove Web Storage Data」ボタンをクリックすると、removeWebStorageData()関数が起動

 

グローバル変数

7行目は、Web Storage にデータを保存する際の「Key」の名前です。

 

疑似レッスン

pseudoLesson()関数で、疑似的にレッスンし、その得点を計算します。

12行目は、ランダム関数を用いて、0点から100点までの得点を計算し、変数「score」に保存します。

13行目は、<output>要素にscoreを表示しています。

14行目で、Web Storageにscoreを保存します。

 

Web Storage を操作する各種関数

createWebStorageData()関数

まず、変数「score」に「0」を代入します。

次に、KEY とscoreをペアとして、Web Storage(Local Storage)に保存します。

 

readWebStorageData()関数

まず、Web Storage(Local Storage)に「KEY」があるかを調べます。

そして、

  • 「KEY」がなければ、createWebStorageData()関数を起動
  • 「KEY」があれば、変数「score」に値を読出し、<output>要素にscoreを表示

 

writeWebStorageData()関数

Web Storage(Local Storage)に、「KEY」と「score」のペアを上書きします。

 

removeWebStorageData()関数

Web Storage(Local Storage)から、「KEY」を消去します。

 

オンロード

オンロード後、Web Storage(Local Storage)が使用可能かチェックします。

使用可能であれば、readWebStorageData()関数を起動します。

 

プロトタイプの動作確認

 

 

まず、上の「Lesson Start」ボタンをクリックし、プロトタイプを起動します。

次に、Webブラウザのデバッガーを起動します(Fig.2 参照)。

Fig.2 Web Storage の表示. Chrome のデバッガー画面.

 

以下、一連の動作を順次、確認します。

  1. 「Lesson!」ボタンをクリックし、scoreの値が変化する(Fig.2 では 73 と表示)
  2. 同時に、Web Storage(Local Storage)の値(Value)が同値に変化する
  3. 一旦、Lesson画面(Webブラウザ)を閉じる
  4. 「Lesson Start」ボタンをクリックし、プロトタイプを再起動する
  5. Web Storage にデータ(Key, Value)が残っている
  6. 「Remove Web Storage Data」ボタンをクリックし、データ(Key, Value)が消える

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。