HTML5 Web Storageのサンプル(Session StorageとLocal Storage)

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

目次

Web Storage

  • キーと値(文字列)を保存する仕組みです。
  • Local StorageとSession Storageの2種類があります。
  • Web Storageがアクセスできる範囲は、オリジン(スキーマ+ドメイン+ポート)の単位です。
    例えば同じサイト上であってもスキーマが異なればそれぞれ別の保存になります。
    →スキーマであるhttpとhttpsではそれぞれ別の保存になります。
  • 保存できる最大容量はブラウザによって異なります。約2~5MBです。
  • データはサーバに送信されません。
  • 以下はMDNのWeb Storage APIのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

Session Storage

  • ひとつのセッションの間、データを保持します。セッションが終わるとデータは削除されます。
  • ブラウザを閉じるとデータは消えます。
  • 同じサイト上の場合、それぞれのウィンドウで別々のデータを参照します。
  • 以下はMDNのSession Storageのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

Local Storage

コード

サンプルのコードです。
10行目をコメントにして、9行目を使用する場合、Session Storageになります。
9行目をコメントにして、10行目を使用する場合、Local Storageになります。
13-15行目はキーと値を登録しています。
18行目は既にあるキーを指定しているので変更になります。
21行目はキーを指定して削除しています。
26行目はキーを指定して値を取得しています。
33行目は全削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload = function(){	

	var st = sessionStorage;
	//var st = localStorage;

	// 追加
	st.setItem('id','1000');
	st.setItem('color1','red');
	st.setItem('color2','blue');

	// 変更
	st.setItem('color1','white'); 

	// 削除
	st.removeItem('color2'); 

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

	document.getElementById("test1").innerHTML 
		= disp; //white,1000

	// 全削除
	//st.clear();
}
</script>
</head>
<body >
	<p id="test1"></p>
</body>
</html>

Web Storageのメソッドとプロパティ

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

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

ChromeでSession Storageを確認する

ChromeでSession Storageを確認する方法です。
F12キーを押してデベロッパーツールを開きます。
「Application」>「Session Storagte」をクリックすると、設定したkeyとvalueがセットされています。
下図のオレンジの部分のアイコンは左からリフレッシュ、全てクリア、選択したものをクリアです。

ChromeでLocal Storageを確認する

ChromeでLocal Storageを確認する方法です。
F12キーを押してデベロッパーツールを開きます。
「Application」>「Local Storage」をクリックすると、設定したkeyとvalueがセットされています。
下図のオレンジの部分のアイコンは左からリフレッシュ、全てクリア、選択したものをクリアです。

 

関連の記事

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



△上に戻る