Javascript WebStorage

2024-04-202024
30.2% (110.5/366)
April
65.1% (19.5/30)
Week 16
79.1% (5.5/7)
Day 20 Sat
54.3% (13/24)

訪問者

total: 8133
today: 1
yesterday: 4
now: 10

↑

更新

MenuBar

Web Storageとは？
サンプルプログラム

Web Storageとは？ †

HTML5で導入された、ブラウザ側で情報を保持するための key-value store
有効範囲
- 同一オリジン (≒同一サイト)
Session Storage
- tab を閉じたら消える
- 別 tab は、別の Session Storage
Local Storage
- 明示的に消さない限り残る
- 別 tab でも共有される
API
- storage.setItem(key, value);
- var value = storage.getItem(key);
- storage.removeItem(key);
- storage.clear();
- storage.length;
- var key = storage.key(n);
value には、文字列しか格納できないので、JSON を格納するときには文字列化する
- storage.setItem(key, JSON.stringify(obj));
- var obj = JSON.parse(storage.getItem(key));
Event
- Storage の変更イベントをフックできる
```
window.addEventListener('storage', function(e){
 console.log(e);
});
```
- 取得できる情報
  - e.storageArea : 変更を受けた Storage オブジェクト。if (e.storageArea === localStorage) で、sessionStorage の変更か localStorage の変更か判定
  - e.url : オリジン
  - e.key
  - e.oldValue
  - e.newValue
- storage.clear() のとき e.key は '' になる

ローカル html からは使えない

[~]$ cd ~/Documents/Coda/WebStorageExample/
[~/Documents/Coda/WebStorageExample]$ python -m SimpleHTTPServer

とかで実行

↑

サンプルプログラム †

index.html

Session Storage に skey1, skey2 を格納。Local Storage に lkey3, lkey4 を格納した

Chrome の Javascript コンソールからも中身を確認することができる

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8"/>
	<title>Web Storage</title>
</head>
<body>
<button onclick="removeItem('skey1')">remove1</button>
<button onclick="removeItem('skey2')">remove2</button>
<button onclick="clearItem()">clear3-4</button>
<button onclick="setItem('lkey5')">add5</button>
<br/>
<textarea id='dumpTextArea1' cols="40" rows="5"></textarea>
<textarea id='dumpTextArea2' cols="40" rows="5"></textarea>

<script type="text/javascript">
(function(){
	if (typeof(Storage) === 'undefined') {
		alert('web storage is not supported');
		return;
	}
	var sstorage = sessionStorage;
	sstorage.setItem('skey1', 'svalue1');
	sstorage.setItem('skey2', 'svalue2');
	
	var lstorage = localStorage;
	lstorage.setItem('lkey3', 'lvalue3');
	lstorage.setItem('lkey4', 'lvalue4');
	
	dumpStorage();
})();

function removeItem(key) {
	sessionStorage.removeItem(key);
	dumpStorage();
}

function setItem(key) {
	localStorage.setItem(key,'newValue');
	dumpStorage();
}

function clearItem() {
	localStorage.clear();
	dumpStorage();
}

function dumpStorage() {
	var ss = sessionStorage;
	var ls = localStorage;
	
	var dump = '';
	for (var cnt = 0; cnt < ss.length; cnt++) {
		var key = ss.key(cnt)
		dump += (key + ' = ' + ss.getItem(key) + '\n');
	}
	document.getElementById('dumpTextArea1').value = dump;
	
	dump = '';
	for (var cnt = 0; cnt < ls.length; cnt++) {
		var key = ls.key(cnt)
		dump += (key + ' = ' + ls.getItem(key) + '\n');
	}
	document.getElementById('dumpTextArea2').value = dump;
	
}
</script>
</body>
</html>

index2.html

別 tab で、index2.html を開くと、Local Storage には index.html で格納したレコードが見えるが、Session Storage には何も入っていない。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8"/>
	<title>Web Storage 2</title>
</head>
<body>
<script type="text/javascript">
(function(){
	if (typeof(Storage) === 'undefined') {
		alert('web storage is not supported');
		return;
	}
	
	document.write('skey1 = ' + sessionStorage.getItem('skey1') + "<br/>");
	document.write('skey2 = ' + sessionStorage.getItem('skey2') + "<br/>");
	document.write('lkey3 = ' + localStorage.getItem('lkey3') + "<br/>");
	document.write('lkey4 = ' + localStorage.getItem('lkey4') + "<br/>");
	
	window.addEventListener('storage', function(e){
		console.log(e);
	});
})();
</script>
</body>
</html>

index1.html で lkey5 を追加する
- lkey5 が追加され、oldValue = null、newValue = newValue であることが検知できる

HTML

Javascript WebStorage

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

Web Storageとは？ †

サンプルプログラム †