勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

  関連記事

110126-HTML5_Logo
navタグ

デザイナーさんより受け取ったファイルにて navという見慣れないタグがあったので ...

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

110126-HTML5_Logo
HTMLのformでオートコンプリートを無効にする

WordPressでタグ入力はオートコンプリートが効かず、他のフォームではオート ...

110126-HTML5_Logo
baseタグ

<base>という見かけないタグがあったのでメモ。 相対パスの基準U ...

110126-HTML5_Logo
Content Security Policyの設定

Content Security Policyの設定をする事があった。Conte ...

110126-HTML5_Logo
tableにスクロールバーを付ける

レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...

110126-HTML5_Logo
オブジェクトタグ/エンベットタグ

<object> <embed> 見たこと、聞いたことが ...

110126-HTML5_Logo
formで送信後にアンカータグをつけたい

formでGETもしくはPOSTで送信し、その後のURLにアンカータグをつけたか ...

110126-HTML5_Logo
readonlyについて

日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...

110126-HTML5_Logo
html内に動画を埋め込んで配信する方法

Webページ内にYoutubeとかを用いずに、動画ファイルを配信したいというケー ...