HTML5 Web Storageのサンプル

HTML5のWeb Storageのサンプルです。

Web Storage

  • Web Storageはキーと文字列を保存します。
  • 2種類の仕様があります。
    仕様 説明
    sessionStorage ブラウザを閉じるとデータは消える
    同じサイト上の場合、それぞれのウィンドウで別々のデータを参照する
    localStorage ブラウザを閉じてもデータは残る
    (明示的に消さない限り残る)
    同じサイト上の場合、複数ウィンドウ間でも同一のデータを参照する
  • Web Storage のスコープはオリジン(スキーマ、ドメイン、ポート)です。
    例えば同じサイト上であってもスキーマが異なればそれぞれ別の保存になります。
    (スキーマであるhttpとhttpsではそれぞれ別の保存になる)
  • 最大保存容量はブラウザごとによって異なる。約2~5MB。
  • 以下はMDNのWeb Storageについて書かれた記事のリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

コード

12行目から32行目までがsessionStorageのサンプルです。
37行目から57行目までがlocalStorageのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web Storageのサンプル</title>
<script>
window.onload = function(){	

	//---------------------------------------------------
	//sessionStorage
	//---------------------------------------------------
	var ss = sessionStorage;

	// setItemメソッドでキーと値をsessionStorageに保存
	ss.setItem('id','00001');
	ss.setItem('name','taro');
	ss.setItem('syouhin1','りんご');
	ss.setItem('syouhin2','ばなな');

	// キーを指定して値を変更
	ss.setItem('syouhin1','オレンジ');
	// キーを指定して削除
	ss.removeItem('syouhin2');

	var disp = "";
	for(var i = 0; i < ss.length; i++){
		// キーを指定して値を取得
		disp = disp + ss.getItem(ss.key(i)) + ",";
	}

	document.getElementById("test1").innerHTML 
		= "sessionStorage=" + disp; //00001,taro,オレンジ,

	//---------------------------------------------------
	//localStorage
	//---------------------------------------------------
	var ls = localStorage;

	// setItemメソッドでキーと値をlocalStorageに保存
	ls.setItem('id','00002');
	ls.setItem('name','jiro');
	ls.setItem('syouhin1','大根');
	ls.setItem('syouhin2','にんじん');

	// キーを指定して値を変更
	ls.setItem('syouhin1','とまと');
	// キーを指定して削除
	ls.removeItem('syouhin2');

	var disp2 = "";
	for(var i = 0; i < ls.length; i++){
		// キーを指定して値を取得
		disp2 = disp2 + ls.getItem(ls.key(i)) + ",";
	}

	document.getElementById("test2").innerHTML 
		= "localStorage=" + disp2; //00002,jiro,とまと,
}
</script>
</head>
<body >
	<p id="test1"></p>
	<p id="test2"></p>
</body>

</html>

メソッドとプロパティ

sessionStorageとlocalStorageの主なメソッドとプロパティです。

 メソッド 説明
 setItem(key,value) keyでデータを登録する 
 removeItem(key) keyのデータを削除する
 getItem(key) keyでデータを取得する 
key(n) n番目のキーを取得する
clear() すべて削除する
 プロパティ 説明
length keyの数を取得する 

結果の確認

上記コードを実行した後、F12キーを押し(ブラウザがchromeの場合)、「Application」をクリックすると、設定したkeyとvalueがセットされています。

・「Session Storage」

 

・「Local Storage」

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 Video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 上下ボタン(スピナー)で数値を入力するサンプル(number)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル




△上に戻る