Web Storage の試作プログラム

2017-01-05 管理者

Contents

1
2 Web Storage
3 プロトタイプ
- 3.1 共有:

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

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

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

Web Storage

SessionStorageとLocalStorage

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

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

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

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

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

デバッガー

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

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

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

Key ：　”lessonData123”
Value：　97

（注）Chromeのデバッガー起動方法

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

プロトタイプ

プロトタイプの動き（仕様）

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

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

プロトタイプの主な機能

Web Storageに新規データを保存する
Web Storageにあるデータを消去する
Web Storageにあるデータを更新する

プログラム1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>Web Storage Prototype</title>
        <script>
            const KEY = "lessonData123";                  // Web Storage Key
            var score;                                    // 
            var output_element;                           // <output>

            function pseudoLesson() {
                score = Math.floor(Math.random()*101);    // 0 <= score <= 100
                output_element.innerHTML = score;
                writeWebStorageData();
            }

            function createWebStorageData() {
                score = 0;
                localStorage.setItem(KEY, score);      　 // setItem
            }

            function readWebStorageData() {
                score = localStorage.getItem(KEY);        // getItem
                if (!score) {
                    createWebStorageData();
                }
                output_element.innerHTML = score;
            }

            function writeWebStorageData() {
                localStorage.setItem(KEY, score);         // setItem
            }

            function removeWebStorageData() {
                localStorage.removeItem(KEY);             // removeItem
                output_element.innerHTML = 0;
            }

            window.onload = function() {
                output_element = document.getElementsByTagName("output")[0];
                if (!localStorage) {
                    output_element.innerHTML = "Local Storage can't use."
                    return;
                }
                readWebStorageData();
            }
        </script>
    </head>
    <body>
        <input type="button" value="Lesson!" onclick="pseudoLesson()">
        <input type="button" value="Remove Web Storage Data" onclick="removeWebStorageData()"><br>		
        <output></output>
    </body>
</html>

プログラム1の説明

body部

<body>
    <input  type="button"  value="Lesson!"                  onclick="pseudoLesson()">
    <input  type="button"  value="Remove Web Storage Data"  onclick="removeWebStorageData()">
    <output></output>
</body>

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

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

グローバル変数

            const KEY = "lessonData123";                  // Web Storage Key
            var score;                                    // 
            var output_element;                           // <output>

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

疑似レッスン

            function pseudoLesson() {
                score = Math.floor(Math.random()*101);    // 0 <= score <= 100
                output_element.innerHTML = score;
                writeWebStorageData();
            }

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

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

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

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

Web Storage を操作する各種関数

            function createWebStorageData() {
                score = 0;
                localStorage.setItem(KEY, score);      　 // setItem
            }

            function readWebStorageData() {
                score = localStorage.getItem(KEY);        // getItem
                if (!score) {
                    createWebStorageData();
                }
                output_element.innerHTML = score;
            }

            function writeWebStorageData() {
                localStorage.setItem(KEY, score);         // setItem
            }

            function removeWebStorageData() {
                localStorage.removeItem(KEY);             // removeItem
                output_element.innerHTML = 0;
            }

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」を消去します。

オンロード

            window.onload = function() {
                output_element = document.getElementsByTagName("output")[0];
                if (!localStorage) {
                    output_element.innerHTML = "Local Storage can't use."
                    return;
                }
                readWebStorageData();
            }

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

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