ゼロからはじめてみる日本語プログラミング「なでしこ」(31) Webストレージを使ってメモ帳を作ろう

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簡易エディタで実行してみましょう。テキストエリアに文章を書いたら「保存」ボタンをクリックしましょう。そして、文章を消して「読込」ボタンをクリックすると、保存した内容が読み出されます。