機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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のようなライブラリを使うと良いと思います。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

androidとwindowsのクリップボードを同期するツールが想像以上に良かった
windows 10のシェア(共有)フォルダをubuntu16.04でマウント(同期)する
Windows 10で定期的にスクリーンショットを撮影してGoogle driveで同期する
Google driveを強制的に同期させる方法
AndroidのGoogle Photoでスクリーンショットを同期する方法
Git gulp expect cron Atomでリモートサーバー同士でファイル同期をする
AngularJS: 文字数を非同期でカウントするアプリを作る


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu