クッキーの替わりに webstorage を使う。

####title
クッキーとwebstorageの比較

####memo

###title3
比較
####table
(cookieとwebstorageの比較)
*比較	*cookie	*Web Storage
*個数制限	20個まで	制限なし
*容量	4Kバイト	2～5Mバイト
*有効期限	あり	なし
*自動送信	する	しない

###title3
対応ブラウザ

####table
(webstorageの対応ブラウザ)
*ブラウザ	*対応バージョン
*IE	8以降
*Firefox	3.6以降
*Chrome	8以降
*Safari	5以降
*Opera	11以降

####center
古いAndroid や iPhone6 でも使用できました^^

####title3
webstorage のデメリット

####memo
webstorageはJavaScriptを使う完全にクライアントサイドのプログラムなので、cookieのようにサーバーでごにょごにょする場合は使いづらくなります。

####title2
webstorage は 2種類あります。

###dl
- sessionStorage
-- 現在のウインド・タブだけで有効。閉じたら消える。

###dl
- localStorage
-- 永久に残る。
-- 別ウインド・タブでも共有可能。

####title
プログラム

####title3
webstorageに対応しているかチェック。
####source
if (typeof localStorage !== 'undefined') {
	alert('Web Storage 対応') ;
} else {
	alert('Web Storage 非対応') ;
}

####title3
サンプルソース

####source
var storage = localStorage;
// セットする
storage.setItem('キー', '値');
// 取得する
v = storage.getItem('キー');
// 削除する
storage.removeItem(key);

####title3
扱いやすい方法

####memo

連想配列を扱う場合も考慮して、一度JSONにしてlocalStorage に記録するのが扱いやすいと思っています。

####source
(設定する例)
var storage = localStorage;
var user_json = {} ;

// セットする
user_json['name'] = "お名前" ;
user_json['address'] = "住所" ;
// JSON を文字列にして、localStorage に
storage.setItem('user', JSON.stringify(user_json));

####source
(取得する例)
var storage = localStorage;
var user_json = {} ;

try {
	user_json = $.parseJSON(localStorage.getItem("user")) ;
} catch(e) {
	user_json =  {};
}

// alert してるだけです。
alert(user_json['address']) ;
$.each( user_json, function( key, val )
{
	alert(user_json[key]);
});

wakatta 記法

このコンテンツを見る