« 配列 | トップページ | スタイル »

2007年3月25日 (日)

ローカルディスクへのデータ保存

dojo.storageを使うことでクライアント側にデータを保存して利用することができる。一般的に、ブラウザ側の保存領域として使うことができるCookieでは数kbyteまでしか保存できないが、dojo.storageではクライアントPCのディスク容量の限りデータを保存できる。

クライアントにデータを保存することで、サーバとのやりとりを減らすことができ、作業の中断をいつでもできるようになる。また、Webベースで提供されているOfficeアプリケーションをオフラインでも動作させることができるようになる。

dojo.storageでは、データの保存とアクセスは、単純なHashテーブルとしてアクセスできる。

dojo.storageを利用するときは、dojo.storage.*とdojo.event.*をrequireする。

dojo.require("dojo.event.*");
dojo.require("dojo.storage.*");

dojo.storageの処理は、dojo.storageがinitializeされてから、実行するようにする。以下の例では、TestStorageオブジェクトのinitializeメソッドにおいてdojo.storageにアクセスして初期化処理(データの取得)をしている。

if(dojo.storage.manager.isInitialized() == false){
dojo.event.connect(dojo.storage.manager, "loaded", TestStorage,
                  TestStorage.initialize);
}else{
dojo.event.connect(dojo, "loaded", TestStorage, TestStorage.initialize);
}

データを取り出すときは、dojo.storage.get(key)を用いる。

var results = dojo.storage.get(key);

データを保存するときは、dojo.storage.put(key, value, saveHandler)を用いる。

try{
  dojo.storage.put(key, value, saveHandler);
}catch(exp){
  alert(exp);
}

valueは、文字列だけでなく、JavaScriptのオブジェクトを指定できる。ローカルファイルに保存するときには、内部でJSON形式の文字列に変換している。

saveHandlerには、保存した後のコールバック関数を指定する。saveHandlerは保存が失敗したかどうかを受け取る。2つの引数を取り、1つ目はstatusで以下の3つの値のどれかとなる。

  • dojo.storage.SUCCESS - 保存に成功
  • dojo.storage.FAILED - ユーザが保存を拒否した
  • dojo.storage.PENDING - ユーザは保存の可否を指定するUIプロンプトを表示している

2つ目の引数は、保存されたkeyNameである。保存は非同期なので、どのkeyが保存されたのかをコールバックで知りたいときもある。以下に、saveHandlerの例を示す。

var saveHandler = function(status, keyName){
  if(status == dojo.storage.PENDING){
     // ... 
  }else if(status == dojo.storage.FAILED){
     // ...
  }else if(status == dojo.storage.SUCCESS){
     // ...
  }
}

dojo.storage.getKeys()を使うと利用できるキーの一覧を取得できる。

var availableKeys = dojo.storage.getKeys();

dojo.storageにより保存された情報は、Cookieと同じく保存時と同じドメインにおいてのみアクセスできる。他のドメインからはアクセスできない。

以下の例は、ボタンを押すと入力フォームの値をローカルファイルに保存する。ブラウザを開いたら、過去に保存した値を入力フォームに戻している。

<html>
  <head>
    <title>Dojo Demos</title>
    <script type="text/javascript" src="dojo.js"></script>
    <script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.storage.*");
dojo.require("dojo.widget.Button");

function buttonPressed(event){
  try{
    dojo.storage.put('inputtext', dojo.byId('inputtext').value, saveHandler);
  }catch(exp){
    alert(exp);
  }
}

var saveHandler = function(status, keyName){
  if(status == dojo.storage.PENDING){
     // ...
  }else if(status == dojo.storage.FAILED){
     // ...
  }else if(status == dojo.storage.SUCCESS){
     // ...
  }
}
      
var TestStorage = {
  initialize: function(){
    if(dojo.storage.get('inputtext')){
      dojo.byId('inputtext').value = dojo.storage.get('inputtext');
    }
  }
}
      
function init(){
  var saveButton = dojo.widget.byId('saveButton');
  dojo.event.connect(saveButton, 'onClick', 'buttonPressed');
      
  if(dojo.storage.manager.isInitialized() == false){
    dojo.event.connect(dojo.storage.manager, "loaded", TestStorage,
                    TestStorage.initialize);
  }else{
    dojo.event.connect(dojo, "loaded", TestStorage, TestStorage.initialize);
  }
}

dojo.addOnLoad(init);
    </script>
  </head>
 
  <body>
    <input type="text" id="inputtext" />
    <button dojoType="Button" widgetId="saveButton">Press Me</button>
  </body>
</html>

« 配列 | トップページ | スタイル »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/5816900

この記事へのトラックバック一覧です: ローカルディスクへのデータ保存:

« 配列 | トップページ | スタイル »