質問: ### 前提・実現したいこと JavaScriptでローカルストレージ(localstrage)を利用したい リンク先のコードをそのまま使用しています。画面に「こんにちはlocalStorage」と表示させるだけです。 http://team-lab.github.io/skillup-nodejs/1/6.html ### 発生している問題・エラーメッセージ ``` 画面になにも表示されない。 Chromeのコンソールを見てもエラーは表示されていないのでどうしたらいいか分からない ``` ### 該当のソースコード ``` JavaScriptのサンプル ``` ### 試したこと ローカルストレージを使用している以下のサンプルコードは動く。 どこで違いが出ているのか分かっていない。 ``` JavaScriptのサンプル 保存したい文字列: ``` ### 補足情報(言語/FW/ツール等のバージョンなど) 特になし。
回答: まるっとコピペしてChromeで試してみましたが、 **Uncaught SyntaxError: Unexpected token (** このようなエラーが出ています。これは、 ``` function (){ ``` ここでfunction文を使って関数を定義しようとしていますが、関数に名前を付けていないことです。 ``` function testStorage(){ ``` 任意のもので構いませんが、何らかの関数名を付けてください。 次に、定義した関数を適切なタイミングで実行する必要があります。現在は、関数を定義しているだけで実行しようとしていませんので、関数名のところを修正しただけでは動作しません。 関数自体は定義したその場で実行することもできますが、script要素はhead要素内にありますので、定義した時点ではまだbody要素やその中身が読み込まれていません。 そのため即実行すると、localStorageの処理はいいのですが、 ``` document.querySelector("#result").innerHTML = val ``` ここで#resultが見つからないため、結果をinnerHTMLに書き込むことができません。 ``` window.addEventListener("load", testStorage, false); ``` 例えばこのようにして、定義した関数をwindowの読み込み完了まで遅らせるといった対応をすることとなります。 他にも、script要素ごとbody要素の末尾(の直前)に移したり(この場合は関数にせずベタ書きしても可)、windowのloadイベントではなくボタンのclickイベントを使ったりと、タイミングの取り方は色々あります。