prog*sig

■20.0 Introduction

かつてはブラウザを閉じるとデータは消滅するセッション的なもののみだった
クッキーが出たことによりブラウザを閉じても維持できるデータができた
今でもクッキーは使われているが、Webアプリのようにより巨大なものが必要になってきた。
そのなかでGoogle Gear(2007)が現れ2009年にはサポートを止めるが、HTML5が主導を持って引き継ぐこととなった。
今新しい技術が賑やかになる中、古い技術も使われ続けている。この章では両方に触れていく。

■20.1 Attaching Persistent Information to URLs

誰でもアクセスできる小さな情報をURLに入れる。
URLに情報を含めるには
フラグメント(window.location.has)や
http://somecompany.com/test.html#one
クエリー(window.location.search)
http://somecompany.com?test=one&test=two
でエンコードした文字列を含めることができる。

■20.2 Creating a Cookie to Persist Information Across Pages

クッキーのサイズは4kb。
クッキーはkey=value;key=valueという感じで扱う。
document.cookie="cookiename=cookievalue";

■20.3  Persisting Information Using the History.pushState Method and window.onpopevent

Ajax遷移のためにURLにフラグメントをつけたりする必要はなくなる。
HTML5ではhistoryオブジェクトがある。(Firefox4～
histotyオブジェクトはJSON.stringifyされた形でローカルに保存されFirefoxでは640kbのサイズが扱える。
Manipulating the browser history - MDC

window.history.pushState({ page : page}, "Page " + page, "?page=" + page);
 ...
window.onpopstate = function(event) {
     // check for event.state, if found, reload state
      if (!event.state) return;
      var page = event.state.page;
}

■20.4  Using sessionStorage for Client-Side Storage

ブラウザが再起動したら消えるセッションストレージ。
Firefox 3.5 ,Safari 4.x IE 8がサポートしてる。

■20.5  Creating a localStorage Client-Side Data Storage Item

クッキーでは小さすぎる、そこでlocalStorageですよ。
いろいろなアクセス方法があるが、localStorageの挙動と簡単なラッパー - but hopeful を読むとメソッドを使うのが無難。

// use item methods
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
// use property names directly
sessionStorage.keyName = "value":
localStorage.keyName = "value";
// use the key method
sessionStorage.key(0) = "value";
localStorage.key(0) = "value":
/* 取得 */
// use item methods
value = sessionStorage.getItem("key");
value = localStorage.getItem("key");
// use property names directly
value = sessionStorage.keyName:
value = localStorage.keyName;
// use the key method
value = sessionStorage.key(0);
value = localStorage.key(0):

後はlengthプロパティとclearメソッドがある。
localStorageは同一ドメインの全部のページで扱えるがポートやプロトコルの違いは通り越せない。
容量はブラウザで異なる Web Storage の残容量を調べてみた - latest log
sessionStorage と localStorage はstorageイベントを発生させるが、それを扱う場所もブラウザによって異なる。
Firefoxはbodyとdocument
IEはbody
Safariはdocument

■20.6  Persisting Data Using a Relational Data Store

W3C Web SQL Databaseについて。
まあアレな感じがまだします。

historyあたりは結構使える感じだと思うので、早く全ブラウザが使える要にナルトいいな。