localStorageを試してみた

Posted on by IKIX_wbdv

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

<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<title>Demo - WebStorage</title>
　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
　<input type="text" id="in">
　<p>
　入力文字列は、「<span id="out"></span>」。
　</p>
　<script>
　$(function(){
　　$('#in').change(function(){
　　　localStorage['string'] = $(this).val();
　　　$('#out').text(localStorage['string']);
　　})
　　$('#out').text(localStorage['string']);
　});
　</script>
</body>
</html>

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