WebStorageについて
2014/05/17
HTML5で規定されている、Webブラウザ内部のKVS(キーバリュー型データストア)。
localStorageとsessionStorageがある。
■localStorageとsessionStorageの違い
[localStorage]
データを消さない限り永久に保存。
別ウィンドウ(別タブ)での共有が可能。
[sessionStorage]
ウィンドウ(タブ)を閉じたら破棄される。
別ウィンドウ(別タブ)での共有が不可能。
■対応ブラウザ
Internet Explorer 8以降
Firefox 3.6以降
Google Chrome 8以降
Safari 5以降
Opera 11以降
■使い方
・格納
localStorage['key'] = 'value';
・取り出し
var value = localStorage['key'];
・キーを指定して削除
delete localStorage['key'];
・全削除
localStorage.clear();
※localStorageのところをsessionStorageに変えられる
■cookieとの違い
[cookie]
HTTPリクエストの度にサーバーに送られる
有効期限がある
1つにつき4KBまで
[localStorage]
HTTPリクエストの度にサーバーに送られない
有効期限がない
1つにつき5MB
■ソース
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function storage () {
localStorage['hoge'] = 'hogehoge'; //key->hoge / value->hogehoge をlocalStorageに保存
var hoge = localStorage['hoge']; //key->hoge のlocalStorageを変数に格納
console.log(hoge); //hogehogeが出力
}
function delete_storage () {
delete localStorage['hoge']; //key->hoge のlocalStorageを破棄
}
$(function(){
if (localStorage['hoge']) {
$('#delete_storage').html('<input type="button" value="delete!" onClick="return delete_storage();">');
}
});
</script>
</head>
<body>
<input type="button" value="storage!" onClick="return storage();">
<span id="delete_storage"></span>
</body>
</html>
■削除方法(firefoxの場合)
FirebugにFireStorage Plus!入れて、Clear～～を選択したら削除できる。
・FireStorage Plus!
https://addons.mozilla.org/ja/firefox/addon/firestorage-plus/
■その他
文字列で保存されるらしいので、
配列とかはシリアライズして入れる。
jQueryだと$("#hoge").serialize()
■参考サイト
http://www.misclog.com/tech/1021/
http://www.atmarkit.co.jp/ait/articles/1103/02/news104.html
http://piyopiyocs.blog115.fc2.com/blog-entry-458.html
http://thinkit.co.jp/story/2012/10/18/3752
関連記事
-
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
readonlyについて
日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...
-
mp3ファイルのアップロードと再生方法
mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...