sessionStorageを試してみた

Posted on by IKIX_wbdv

　HTML5 APIのウェブストレージ（WebStorage）を試している．
　ローカルブラウザにセッションデータを保存できる「セッションストレージ（sessionStorage）」は，随分と短い記述で動作する．次のソースコードでは，テキストボックスに入力したあとにリンクを押すと，リンク先のページに入力した文字列が表示される．

<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<title>Demo - SessionStorage</title>
　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
　<input type="text" id="session">
　<p><a href="next.html">テスト</a>
　</p>
　<script>
　$(function(){
　　$('#session').change(function(){
　　　sessionStorage.string = $(this).val();
　　});
　});
　</script>
</body>
</html>

 
　以下はリンク先のページのソースコード．
 

<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<title>Demo - SessionStorage</title>
　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
　<p>
　セッションストレージの文字列は「<span id="val"></span>」
　</p>
　<script>
　$(function(){
　　$('#val').text(sessionStorage.string);
　});
</script>
</body>
</html>

 
（Firefoxで動作確認済．Edgeで無動作も確認）