Web Storageとは?

サンプルプログラム

  1. index.html
    ws1.png
    • 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>
      
  2. index2.html
    ws2.png
    • 別 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>
      

HTML


添付ファイル: filews3.png 2228件 [詳細] filews2.png 2163件 [詳細] filews1.png 2193件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2014-03-25 (火) 01:27:33 (3908d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=e3b58174de
ISBN10
ISBN13
9784061426061