Web API Storage の使用　

Storage APIの使用


Web Storage には、
sessionStorageと、
localStorageの2種類あります。
上の画像は、localStorageの使用例です。
sessionStorageは、
ブラウザが閉じられるまでデータを保存します。
localStorage は、
ブラウザーを閉じたり、開いたりしてもデータは保存しています。




コードは下の様になります。



<body>
  <div >
    <h1>Web storage</h1>

    <p>
    これは Web Storage API の使用例です。
    </p>

    <form>
      <div>
        <label for="bgcolor">バックグラウンドカラー選択:</label>
	      <input class="color" id="bgcolor" value="CCFFFF">
      </div>
      <div>
        <label for="font-size">フォントサイズ選択:</label>
        <select id="font-size">
        	<option value="10" >10</option>
        	<option value="20" selected>20</option>
        	<option value="30">30</option>
        </select>
      </div>   
    </form>
  </div> 

<script>
 
  if(!localStorage.getItem('bgcolor')) {
     populateStorage();
   }

 setStyles();

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font-size').value);
}

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentSize  = localStorage.getItem('font');
  var htmlElem = document.querySelector('html');
  var pElem = document.querySelector('p');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font-size').value = currentSize; 

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontSize = currentSize;
 }

</script>



上のコードでは、
２つの
localStorage.setItem()と、
localStorage.getItem()の
Storageメソッドを使用しています。
localStorage.setItem()は、
キーの名称と値を渡し、ストレージにキーを追加、または既存の値を更新します。
localStorage.getItem()は、
キーの名称を渡し、キーに対する値を取得します。




スタイルのコードは下記になります。



html {
	font-family: sans-serif;
}
p,form,li {
	font-family: 'Open Sans Condensed', sans-serif;
}



以上です。