JavaScriptでローカルストレージを使用したい
解決済
回答 2
投稿
- 評価
- クリップ 1
- VIEW 1,761
前提・実現したいこと
JavaScriptでローカルストレージ(localstrage)を利用したい
リンク先のコードをそのまま使用しています。画面に「こんにちはlocalStorage」と表示させるだけです。
http://team-lab.github.io/skillup-nodejs/1/6.html
発生している問題・エラーメッセージ
画面になにも表示されない。
Chromeのコンソールを見てもエラーは表示されていないのでどうしたらいいか分からない該当のソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>JavaScriptのサンプル</title>
<script type="text/javascript">
function (){
// messageというキーに「こんにちはlocalStorage」という値を保存
localStorage.setItem("message", "こんにちはlocalStorage");
// messageというキーに保存した値を取得して表示
var val = localStorage.getItem("message");
document.querySelector("#result").innerHTML = val
}
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>試したこと
ローカルストレージを使用している以下のサンプルコードは動く。
どこで違いが出ているのか分かっていない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>JavaScriptのサンプル</title>
保存したい文字列:<br>
<textarea id="edit_00" style="width:100%; height:100px; margin:0px 0px 5px 0px;"></textarea><br>
<input type="button" id="button_00_load" style="width:80px; height:40px; margin:0px 0px 10px 0px;" value="読み込み">
<input type="button" id="button_00_save" style="width:80px; height:40px; margin:0px 0px 10px 0px;" value="保存">
<input type="button" id="button_00_del" style="width:80px; height:40px; margin:0px 0px 10px 0px;" value="削除">
<script type="text/javascript">
<!--
// 匿名関数内で実行
(function (){
// テキストフォームの element を取得
var element_edit = document.getElementById("edit_00");
var element;
// 読み込みボタンの element を取得
element = document.getElementById("button_00_load");
// ボタンが押されたときに実行されるイベント
element.onclick = function (){
try{
// "test_key" からデータを取り出す
element_edit.value = localStorage.getItem("test_key");
}catch(e){
// エラーを出力
element_edit.value = e + "\n" + element_edit.value;
}
};
// 保存ボタンの element を取得
element = document.getElementById("button_00_save");
// ボタンが押されたときに実行されるイベント
element.onclick = function (){
try{
// "test_key" にデータを保存する
localStorage.setItem("test_key",element_edit.value);
}catch(e){
// エラーを出力
element_edit.value = e + "\n" + element_edit.value;
}
};
// 削除ボタンの element を取得
element = document.getElementById("button_00_del");
// ボタンが押されたときに実行されるイベント
element.onclick = function (){
try{
// "test_key" のデータを削除する
localStorage.removeItem("test_key");
}catch(e){
// エラーを出力
element_edit.value = e + "\n" + element_edit.value;
}
};
})();
//-->
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>補足情報(言語/FW/ツール等のバージョンなど)
特になし。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
まるっとコピペして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要素の末尾（</body>の直前）に移したり（この場合は関数にせずベタ書きしても可）、windowのloadイベントではなくボタンのclickイベントを使ったりと、タイミングの取り方は色々あります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
・コピペした簡単なコードが動かないと思っていたが、確認するとリンク先のコードに
document.querySelector("#result").innerHTML = val
などの行を加わっており、自分でどこからか引っ張ってきたことを忘れていたらしい。
・適当にいじっているとinnerHTMLがnullになっているというようなエラーが出た。
要素がロードされる前に参照しているのが問題のようで、関数にonloadを付けると正しく表示された。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2016/10/14 18:23
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。