HTML5プログラミング ITかあさん

ITかあさん

目次：HTML5プログラミング

2011年10月11日| HTML5プログラミング

localStorageを使ってユーザー設定を保存する

localStorageを使って設定フォントサイズを保存しよう

今回はlocalStorageを使ってユーザー設定を保存するプログラムを紹介します。
よくJavascriptベースでページ内の文字を変更するボタンがありますね。あれをlocalStorageを使って設定を保存し、ページをリロードしたり、閉じたりしても設定されたフォントサイズが呼び出されるようにします。
今回のスクリプトは前回のlocalStorageメモよりは簡単です。

サンプルスクリプト

まずはサンプルスクリプトから

<div id="Sizer">

<input type="button" value="小" id="small"/>

<input type="button" value="中" id="middle"/>

<input type="button" value="大" id="large"/>

</div>

<div id="text">文字文字</div>

$(document).ready(function(){

  var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し

  $("head").html(hoge);//headにスタイル書き出し

  });
$("#small").click(function(){

  localStorage.setItem("font_size", "<style>.fontsize{font-size:0.5em;}</style>");

  var hoge = localStorage.getItem("font_size");

  $("head").html(hoge);//headにスタイル書き出し

  });

  $("#middle").click(function(){

  localStorage.setItem("font_size", "<style>.fontsize{font-size:1em;}</style>");

  var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し

  $("head").html(hoge);//headにスタイル書き出し

  });

  $("#large").click(function(){

  localStorage.setItem("font_size", "<style>.fontsize{font-size:2em;}</style>");

  var hoge = localStorage.getItem("font_size");//strageに保存された設定呼び出し

  $("head").html(hoge);//headにスタイル書き出し

  });

  </script>
DEMO

動作説明

DEMOのURLをブラウザより確認して下さい。ほとんどのブラウザは対応されていると思いますが、うまくいかない場合はChromeやOperaで試してください。
前回はメモでフォーム内のテキストを保存しましたが、今度はCSSのスタイルを保存しています。
大や小ボタンを押してからブラウザを閉じて、再び開くと前回の設定が保存されているのが確認出来ます。
ボタンのいずれかが押されたらfont_sizeというストレージ名で保存します。

 localStorage.setItem("font_size", "<style>.fontsize{font-size:2em;}</style>");

失敗例

localStorageでの失敗例は、localStorageは文字列しか保存できないのに、DOM要素を入れた場合。
例えばこのように、フォントサイズの変更が入ったクラスを付与するパターン。マークアップエンジニアの方はHTML上にCSSが書いてあるのは我慢ならんので　クリックされたらクラスを付与したいと思うはず。

localStorage.setItem("font_size", $("#text").addClass("middle"));
alert(localStorage.getItem("font_size"));
DEMO

動作説明

どうでしょうか？ボタンを押された瞬間はフォントサイズが変わり、クラスが付与されたことは確認できましたが、ブラウザを閉じて、もう一度開くと、フォントサイズはデフォルトに戻っています。
アラートが出ていますが、このアラートはlocalStorageに何が入っているのかを確認したもので、結果はobject Objectとなり、確認することが出来ません。

localStorageのまとめ

結局文字列ベースで保存するのが一番です。マークアップの方からすると若干気持ちが悪いですが。

補足

localStorageは、ローカル環境だと完全に動かないケースもあります。サーバーにアップすると問題なく動き、ローカルだと今回のサンプルは動きませんでした。
IEに関しては、localStorage対応でも、インターネットオプションにlocalStorageを使う旨設定しておかないと、これも動いてくれません。
localStorageはサーバーにスクリプトを設置して、インターネットオプションをきちんと確認してから使うように心がけましょう。

2011年10月06日| HTML5プログラミング

localStorageまとめと注意事項

HTML5　APIの一種であるｌocalStorage。実際に使ってみたところ、各ブラウザ間で挙動が異なったりで戸惑うことが多かったので、localStorageについてまとめと注意事項を説明したいと思います。

主な使い道

・ちょっとしたメモアプリに
・ユーザーの設定の保存(例えば背景や文字サイズの設定を保存)
・スマホサイトの高速化に

localStorageのプロパティ

length … ストレージへ格納されてた数を取得
key(index) … 項目のインデックスを指定してキーを取得
getItem(key) … キーを指定して値を取得。
setItem(key, data) … 指定されたキーを保存
removeItem(key) … 指定されたキーを削除
clear() … ストレージをクリア

対応ブラウザ

ブラウザ バージョン
Internet Explorer 8
Firefox 3.5+
Safari 4.0
Goole Chrome 4.0
Opera 11

localStorage非対応ブラウザでの実装方法

localStorage非対応ブラウザでもGearsにて実装することが可能。
これにより、IE７以前や、Android1.6でもlocalStorageを実装することが出来る

そもそもGearsって何？

現在GoogleはWebアプリのオフライン化を実現する拡張機能「Gears」を終了して、HTML5へ移行すると発表しました。
ただ、これからもlocalStorageをはじめ、非対応ブラウザにHTML5 APIのような拡張機能を持たせるときにはお世話になることでしょう。
第1回　そもそもGoogle Gearsって何？
IE6でWeb Databaseをサポートするハック

基本的な使い方

よく使うのはこんなところ

var hoge = localStorage.getItem("text");//textというキー名で保存したデータの呼び出し

localStorage.setItem("hoge", hogehoge);//hogeというキー名で変数hogehogeを保存

localStorage.clear();//全ての key と 値 を削除

localStorage注意事項

・IEだとlocalStorage対応バージョンでも、あらかじめ設定をONにしていないと動かない。
(これも最初知らず、ハマりました)
・IEではローカル環境ではlocalStorageが動作しない。サーバーに設置してから。

推奨されない書き方

var value = localStorage["key"];
localStorage["key"]= var value;

このような書き方をするサンプルも多いですが、基本的には推奨されません。きちんとgetItem("text")
と書くのが正しい。

【超重要】

HTML5 の仕様では、localStorage にオブジェクトを突っ込めるそうですが、ブラウザによっては実装できないことが多い。そのためOpera、Chromeでは問題なく実装できても、Firefox、IEではうまくいかないことも。
オブジェクトを代入する場合、一度文字列に変換してからストレージをセットするのがよいらしい。
たとえば日時をセットする場合

localStorage.setItem("date_time", (new Date()).toString());   //保存日時

localStorageはいい感じ: ぺるたごブログ

localStorage役立ちリンク

その他localStorageのお勉強に役立ちそうなリンク
第14回HTML5とか勉強会
[JavaScript][HTML5][localStorage]localStorageの挙動と簡単なラッパー – but hopeful
ブラウザ別、localStorage の削除に関わる所作 :WEB 職人

2011年10月04日| HTML5プログラミング

localStorageを使って、簡易メモ帳を作ってみよう

localStorageとは

JavaScriptコードからアクセスできて、テキスト形式の任意のデータを保存できます。例えばサーバー側からデータをキャッシュとしてローカルに保存することが出来、localStorageではオフライン状態でも保存したデータを見ることが出来ます。
スマートフォンサイトなどではこの機能を使ってサイトの高速化を実現できます。

localStorageの基本プロパティ

localStorageでは下記の項目のプロパティを使うことが出来ます。なお、保存できるのはテキストデータのみです。画像などの保存は出来ません。

length ストレージに保存されている項目の数
key(index) 指定されたインデックスのkeyの取得
getItem(key) keyの値を取得
setItem(key, data) keyにdataを保存する
removeItem(key) 指定されたKeyの値削除
clear() ストレージ全体を削除

localStorage簡易メモ

ざっとコードを解説しますと、
・window.onloadでページを開いたら処理を開始
・ストレージ内のデータを読み込み
・ストレージのデータが空でなければ呼び出し
・$(“#del”).click（）で削除ボタンのクリックでストレージ削除してリロード
・$(“form”).submit()で送信ボタンが押されたらストレージデータの更新

<!DOCTYPE html>

  <html><head><meta charset="utf-8"></head><body>

  <h1>strageメモ</h1>

  <div id="msg_div"></div>


<form method="post">

  <textarea id="main_txt" cols="80" rows="30"></textarea>

  <input type="submit" value="送信"/>

  </form>

  <input type="button" value="削除" id="del"/>

  <!-- Android 1.6対策 -->

  <script type="text/javascript" src="./js/gear5-0.3.js"></script>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<script type="text/javascript">

  window.onload = function() {

  // メモの読み込み

  var body = localStorage.getItem("memo");//strageに保存されたメモ

  var date_time = localStorage.getItem("date_time");//strageに保存された日時

  if (body != null) {

  $('#main_txt').val(body);

  $('#msg_div').text(date_time);


 }

  };

  

  //削除ボタンを押したらストレージ削除

  $("#del").click(function () {

  localStorage.clear();

  window.location.reload();

  });


//送信ボタンを押したら、ストレージを保存

  $("form").submit(function() {

  localStorage.setItem("memo", $('#main_txt').val());

  localStorage.setItem("date_time", new Date());//保存日時

  });

  

  </script>

  </body>

  </html>
DEMO
« »