Webストレージを使ってメモ帳を作ろう

今回は、Webストレージの機能を使ったメモ帳を作ってみましょう。特に、Webストレージを利用して、ブラウザにデータを保存する方法と、その仕組みを紹介します。

  • 今回作るメモ帳

    今回作るメモ帳

Webブラウザにデータを記憶させる方法

さて、最初に、Webブラウザにデータを記憶させる方法を紹介しましょう。Web上で扱うデータを保存するには、いくつかの方法があります。

例えば、Web上の掲示板などで、前回書き込んだときの名前やメールアドレスを覚えていてくれる仕組みがあります。これを実現するには、「クッキー」と「Webストレージ」という二種類の仕組みがあります。

まず、「クッキー」ですが、これは古いWebブラウザでもサポートされています。ただし、制限があり4KB以上の情報を保存することができません。また、一つのWebサイトにつき最大20個までと決められています。

次に、「Webストレージ」です。クッキーと同じように端末内に任意のデータを保存できます。こちらは、比較的新しい規格ですので、利用するブラウザにもよりますが、5MBのデータを保存することができます。しかも、保存個数に規定はありませんので、簡単なデータであれば数万件のデータを保存することもできます。そこで、ここでは、Webストレージを利用する方法を紹介します。(なお、Webストレージには、localStorageとsessionStorageの二種類がありますが、ここでは、半永久的にデータを保存できるlocalStorageに言及しています。)

クッキーとWebストレージの比較表

- 保存容量 最大個数
クッキー4KB 20個
Webストレージ5MB -

なでしこでWebストレージを使う方法

そして、なでしこで、Webストレージを使うには、「保存」命令と「開く」命令を使います。それぞれ、名前を付けてデータを保存することができます。以下は、メッセージを保存し、それを読み込んで、画面に表示する例です。

 # --- 保存の使い方 ---
 「格言1」に「捨てるのに時がある」を保存。

 # --- 開くの使い方 ---
 「格言1」を開いてSに代入。
 Sを表示。

Webブラウザから使える「なでしこ3の簡易エディタ」を使って試してみましょう。

  • 「保存」「開く」命令の利用例

    「保存」「開く」命令の利用例

メモ帳を作ってみよう

これだけ分かれば、メモ帳を作ることができるでしょう。HTMLでテキストエリア(textarea)を作成して、保存ボタンをクリックした時にWebストレージへ保存するようにし、読込ボタンをクリックした時にWebストレージから読み込むようにします。

 # --- 見た目の部分を作成 ---
 「メモ帳」のラベル作成して、改行作成。
 メモ帳=「」のテキストエリア作成
 メモ帳に{
     "width": "500px",  "height": "200px",
     "padding": "10px", "margin":"10px",
     "background-color": "#f0f0ff"
 }をDOMスタイル一括設定。
 改行作成。
 保存ボタン=「保存」のボタン作成。
 読込ボタン=「読込」のボタン作成。

 # --- イベントを指定 ---
 保存ボタンをクリックした時には
     メモ帳からテキスト取得して、それをSへ代入。
     「メモ帳データ」へSを保存。
 ここまで。
 読込ボタンをクリック時には
     「メモ帳データ」を開いて、それをSへ代入。
     メモ帳へSをテキスト設定。
 ここまで。

このプログラムを、なでしこ3簡易エディタで実行してみましょう。テキストエリアに文章を書いたら「保存」ボタンをクリックしましょう。そして、文章を消して「読込」ボタンをクリックすると、保存した内容が読み出されます。

  • メモ帳を実行したところ

    メモ帳を実行したところ

Webストレージに関して利用上の注意

ところで、Webストレージですが、利用上の注意点もあります。Webブラウザのセキュリティ制約なのですが、Webストレージは、プログラムを配置しているドメインごとに完全に分離しています。

例えば、ドメイン「nadesi.com」に配置したプログラムの中で「格言1」に値を保存したとしても、別のドメイン「kujirahand.com」に配置したプログラムからは、読み出すことができません。

まとめ

このように、なでしこ3では、それほど意識しなくても、「保存」命令「開く」命令を利用して、Webストレージを利用することができるようになっています。今回の例のように、メモ帳を作るだけでなく、以前入力した内容を自動的に思い出すようにするなど、使いどころはたくさんあります。活用してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2005年IPAスーパークリエイター認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。