local storage API 非同期処理をしたい場合の注意点

小一時間ハマったのが、inputタグとかで、値を書き換えて、それをlocal storageのkeyに格納したいな、と思った時。 たぶん、試そうとした人、いるのではないでしょうか。

<input id="result" type="text" name="main" value='gege'>
<input type="button" name="button" value="SAVE" onclick="save()"/>

<script type="text/javascript">

function save(){
localStorage.setItem("content", document.getElementById("result").getAttribute('value'));
}

</script>

まずこういうHTMLを用意してもらって。

Chromeデベロッパーツールがあると分かりやすいかと思います。application > storage > local storage です。

それで、このHTMLを表示したら、デベロッパーツールのlocal storageには何も値がないことを確認して、SAVEボタンを押します。

すると、値にgegeって追加されたかと思います。

では、inputの値をhogeとでも書き換えて、もう一度ボタンを押してください。変わるはずですよね？

…でも、変わらない。

こういうハマり方をしました。うーん、なんでやろ。

こういう非同期処理をしたい場合は、普通のJavascript＋HTMLではなく、angularJSのようなライブラリを使うと良いと思います。