Asynchronous Local Storage API JavaScript: Points to Note

What I got stuck on for about an hour was when I wanted to rewrite a value in an input tag or something and store it in a 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>

First, prepare HTML like this.

It's easier to understand with Chrome Developer Tools. It's application > storage > local storage.

Then, when you display this HTML, confirm that there's no value in local storage in the developer tools, and press the SAVE button.

Then, I think gege was added to the value.

Now, rewrite the input value to something like hoge and press the button again. It should change, right?

...But it doesn't change.

This is how I got stuck. Hmm, I wonder why.

For such asynchronous processing, I think it's better to use a library like AngularJS rather than plain JavaScript + HTML.