Firefox 3でlocalStorageを使うには

杉山貴章(オングス)
2008-12-09 17:00:00
  • このエントリーをはてなブックマークに追加

Firefox 3におけるglobalStorageの使用方法

 HTML 5では、localStorageもデータの有効範囲が異なるだけで使い方はsessionStorageと同様である。すなわち、リスト1のようにすればよい。

リスト1 localStorageの使用方法

// データの保存
localStorage.username = "Ziddy";
localStorage.setItem('username', 'Ziddy');

// データの参照
var username = localStorage.username;
var username = localStorage.getItem('username');

// データの削除
delete localStorage.username;
localStorage.removeItem('username');

 ただし、この方法はFirefox 3では使えない。Firefox 3ではlocalStorageと同様の機能をglobalStorageとして提供しており、これをHTML 5に提案していたが、最近HTML 5のドラフトが変更されてlocalStorageとして定義されることになった。現時点ではFirefox 3はまだこの新しい仕様に対応していない。

 globasStorageはドメイン名を指定してリスト2のように使用する。

リスト2 globalStorageの使用方法

// データの保存
globalStorage['ドメイン名'].username = "Ziddy";
globalStorage['ドメイン名'].setItem('username', 'Ziddy');

// データの参照
var username = globalStorage['ドメイン名'].username;
var username = globalStorage['ドメイン名'].getItem('username');

// データの削除
delete globalStorage['ドメイン名'].username;
globalStorage['ドメイン名'].removeItem('username');

 なお、Firefox 2のglobalStorageでは上位ドメインのストレージへのアクセスが許可されていたが、Firefox 3ではこれが禁止されてセキュリティエラーとなる。現在のページのホスト名は"location.hostname"で取得できるので、globalStorageを利用する場合にはリスト3のようにすればよい。

リスト3 location.hostnameでホスト名を指定する

globalStorage[location.hostname].username = "Ziddy";

 もしFirefox 3とlocalStorage対応のウェブブラウザ(Safari 4やInternet Exploler 8など)で共通のコードにしたい場合には、スクリプトの最初にリスト4のような変数宣言を入れておけばよい。これでもしブラウザがFirefox 3の場合でも、globalStorageをlocalStorageのように扱うことができる。

リスト4 globalStorageをlocalStorageのように扱う設定

var localStorage = localStorage || globalStorage[location.hostname];

 なお、FirefoxでもFirefox 3.1ではlocalStorageに対応する予定となっている。

  • 新着記事
  • 特集
  • ブログ