SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Cloud SQLで学ぶ業務・基幹系アプリ再入門

Cloud SQLとHTML5のWeb Storageで高速仕訳入力

Cloud SQLで学ぶ業務・基幹系アプリ再入門(2)

  • X ポスト
  • このエントリーをはてなブックマークに追加

Web Storageプログラミングの基本

1. 対応ブラウザ

 Web Storageは、IE 8、Safari 4、Firefox 3.5、Chrome 3、Opera 10.5 およびそれ以降のバージョンで使用できます。実際に使用中のブラウザで動作可能かは次のスクリプトで簡単に確認することができ、今回のサンプルにも組み込んであります。

リスト1 ブラウザのWeb Storage使用可能確認
if(localStorage){
    $("#stat").text("このブラウザはlocalStorageを使用できます。");
}else{
    $("#stat").text("このブラウザはlocalStorageを使用できません。");    
}     

2. 基本プログラミング

 Web StorageのプログラミングはJavaScriptで行いますが、次のような簡単なコード記述でlocalStorageの操作が可能です。

2.1 localStorageのメソッド・プロパティ

 localStorageには次のようなメソッド・プロパティがありストレージ操作に使用されます。またこのメソッドはセッションストレージ(sessionStorage)でも同様の書式(localStorageをsessionStorageに置き換え)で使用することができます。

  • setItem(key, data) ―― キーと値を指定して永続化する。キーと値はどちらも文字列に限られる
  • getItem(key) ―― キーを指定して値を取得する
  • removeItem(key) ―― キーを指定して値を削除する
  • clear() ―― ストレージをクリアする
  • length ―― ストレージに格納されている項目の数を返す
  • key(index) ―― 項目のインデックスを指定し、キーを取得する

2.2 メソッド/プロパティの使用例

(1)localStorageにデータを書き込む
localStorage.setItem("111101",  "現金");

//この後同じキー値で再書き込みすれば上書きされる
localStorage.setItem("111101",  "小口現金");

//複数のバリュー値をJSONフォーマットで書き込む
localStorage.setItem("111102", { acct_name:  "現金 ", remark: "現金勘定" });
(2)localStorageからデータを取得する
var account = localStorage.getItem("111101");

 また、通常のJavaScriptオブジェクトからのプロパティ読出しと同様のコード書式も使用できます。

var account = localStorage["111101"];
(3)localStorageのデータを削除する
localStorage.removeItem("1111101");

 削除の場合もJavaScriptオブジェクトからのプロパティ削除と同様のコード書式が使用できます。

delete localStorage["111101"];

 localStorageに格納されたすべてのデータを削除する場合は、clear()メソッドを使用します。

localStorage.clear();
(4)ストレージデータのループ処理
for(var i = 0; i < localStorage.length; i++){
  var key = localStorage.key(i);
  var value = localStorage[key];
  ...
  }

次のページ
Cloud SQLとWeb Storageを使用した仕訳データ登録サンプル

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Cloud SQLで学ぶ業務・基幹系アプリ再入門連載記事一覧

もっと読む

この記事の著者

清野 克行(セイノ カツユキ)

慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6672 2012/07/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング