Web API sessionStorageの使用

sessionStorageの使用


上の画像では、
sessionStorageを使用しています。
入力欄には、
初期設定として、
「Web セッションストレージ」が表示されています。
このとき、
「Web セッションストレージ」の表示の、
「セッションストレージ」の部分を削除します。

入力欄を「Web 」にして、
マウスを右クリックします。
こうすることで、
session Storageに、
保存されます。

この時のキーと値は、
autosave:Web
になります。

こうすると、
ウエブページをリロードしても、
初期設定の「Web セッションストレージ」ではなく、
「Web 」を表示するようになります。

ページを開いている間、この保存は続きます。
ページを閉じ、再びページを開くと、
初期設定の「Web セッションストレージ」に戻っています。

ページをリロードしたときの画像は
下の様になります。




session Storageに保存されている状態は、
Chromeブラウザ場合、
ディベロッパーツールを開くことで確認できます。

ディベロッパーツールは、
Google Chrome右上メニューで、
Google Chromeの設定/その他のツールから開きます。

session Storageは、
ディベロッパーツール/Application/Storageで、
session Storageを開きます。

下の画像は、
「Web 」を表示のときの、
ディベロッパーツールの状態です。

赤い矢印で示した箇所が、
Application
です。

その下の赤枠で囲んだ部分の、
autosave:Web
が、
session Storageに保存されています。




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



<body>
  <div >
    <h1>Web storage</h1>
    <p>
    Web Storage API sessionStorageの使用例
    </p>
    <form>
      <div>
        <input id="f" value="Web セッションストレージ">  
      </div>   
    </form>
<script>

var f = document.getElementById("f");

if (sessionStorage.getItem("autosave")) {

  f.value = sessionStorage.getItem("autosave");
}

f.addEventListener("change", function() {
 
  sessionStorage.setItem("autosave", f.value);
});

</script>
  
</body>
下はスタイルのコードです。 




html {
	font-family: sans-serif;
}
p,form,li {
	font-family: sans-serif;
}



以上です。