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
関連記事
-
HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...
-
mp3ファイルのアップロードと再生方法
mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...
-
tableにスクロールバーを付ける
レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...
-
フォームでカラーコードを入力したい際にプラグイン無しでピッカー機能を搭載する方法
あるフォームの項目でカラーコードを入力したいというケースがあった。だいぶ前に同じ ...
-
HTMLとJavaScriptのソースコードの暗号化(難読化)
サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...