前提・実現したいこと

javaScriptでローカルストレージの保存と取得をしたい。

発生している問題・エラーメッセージ

クリックボタンで実行するはずが、無反応です。

該当のソースコード

javaScript
1<!DOCTYPE html>
2
3<html>
4<head>
5	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6	<title>Sample</title>
7	<style>
8	h1 {font-weight:bold; color:#999; padding:3px; }
9	body { font-size:14pt; color:#666; }
10	</style>
11</head>
12<body onload="init();">
13	<h1>Hello!</h1>
14	<p id="msg"></p>
15	<input type="text" id="txt1">
16	<button onclick="clickBtn();">Click</button>
17	<script src="sample.js"></script>
18</body>
19</html>

//sample.js
function init() {
	//id='txt'のDOMを得る
	var txt = document.getElementById( 'txt1' );
	//保存した値を取り出す
	var str = localStorage.getItem('msg');
	//id='msg'のDOMを得る
	var msg = document.getElementById( 'msg' );
	//テキストをDOMのコンテンツに設定
	msg.textContent = 'メッセージ:「' + str + '」';
}

function clickBtn() {
	// id='txt'のDOMを得る
	var txt = document.getElementById( 'txt1' );
	localStorage.setItem( 'msg', txt.value );
	//valueを使ってメッセージを作成
	var result = ' メッセージ:「 ' + txt.value + ' 」を保存しました。 ';
	// id='msg'のDOMを得る
	var msg = document.getElementById( 'msg' );
	//テキストをDOMのコンテンツに設定
	msg.textContent = result;
	//入力フィールドを空にする
	txt.value = ' ';
}

試したこと

ブラウザはChrome、IEで試しました。
localStorage.setItem( 'msg', txt.value )で取得できていない事まで解りました。
なぜ取得できないのかが解りません。

補足情報（FW/ツールのバージョンなど）

m.ts10806

2018/04/22 22:43

現象再現しません。setItemで値の保存、getItemで値の取得、ですが、ボタンを押して保存した情報は、次のアクセス時（F5画面更新でOK）に前に保存した情報が表示されるので、正常に保存と取得ができています。

mkdsk

2018/04/22 23:10 編集

回答ありがとうございます。再度、試してみましたが、次のアクセス時(F5画面更新)に保存した情報が表示されませんでした。エラー内容は「SCRIPT5007: 未定義または NULL 参照のプロパティ 'setItem' は取得できません index.html (15,2)」でした。もし何かしらの原因があるとすれば教えてください。

m.ts10806

2018/04/23 00:05

m.ts10806

2018/04/23 00:06 編集

setItem側にエラーが出るのでそもそも保存時にこけているということになります。

maisumakun

2018/04/23 00:09

DOCTYPEで互換モードに切り替わっている可能性も考えられます。特に必要がないなら、HTML5の<!DOCTYPE html>だけにしましょう。

m.ts10806

2018/04/23 00:11 編集

ただ、現在の位置にsample.jsの読み込み記述を書いても現象再現しなかったので、回答にあるとおりブラウザの関係かもしれません。IE11では再現しました。

m.ts10806

2018/04/23 00:15 編集

本件とは関係ないですけど、　cssに「front-size」という指定はないので修正しておいてください。

mkdsk

2018/04/23 01:48

ありがとうございます。ご指摘頂いた内容は修正しました。

m.ts10806

2018/04/23 01:49

コード修正されたようですが、私のコメントは「<body>の直前」ではなく「</body>の直前」です。この質問の回答で解説がされています。→https://teratail.com/questions/14600

mkdsk

2018/04/23 02:10

失礼しました。修正しました。また、解説ありがとごうざいます。

行動規範の内容に同意します

回答3件

ベストアンサー

下記、入れてみてください。
もし、これでアラートがでれば使っているブラウザはlocalstorage非対応ということになります。

js
1if (!window.localStorage) {
2    alert("お使いのブラウザはlocalstorageに対応してません。");
3}

非対応は多くないとはいえ、ブラウザ依存の機能にもなるため、「使えない場合」の対応はnoscriptと同じような意味合いでおまじないのように入れておいても良いですね。

設定によって使えなくなっている可能性がないわけではないですが、
下記記事も参考にしてみてください。

モダンブラウザのストレージ容量まとめ

※ひとまず私の環境で本来対象のはずですがIE11ではアラートがでました。Chrome（最新）ではアラートは出ず正常動作しました。
設定確認してみたのですが、原因は特定できていません。

確認用コード

別の角度から確認してみましょう。
localStorageに固定値を入れてボタンを押したら保存した情報を出力するものとなっています。

html
1<body>
2    <p id="msg"></p>
3    <button onclick="clickBtn();">Click</button>
4

js
1var ls = null;
2(window.onload = function() {
3    var msg = document.getElementById("msg");
4    if(ls_check()){
5        ls.setItem('test','hoge');
6    }else{
7        msg.innerHTML = "localStorage非対応";
8    }
9})();
10function ls_check(){
11
12    if (!window.localStorage) {
13        return false;
14    }else{
15        ls = localStorage;
16        return true;
17    }
18}
19function clickBtn(){
20    if(ls_check()){
21        msg.innerHTML = ls.getItem('test');
22    }
23}
24

投稿2018/04/23 00:23

編集2018/04/23 02:13

m.ts10806

総合スコア80850

mkdsk

2018/04/23 01:51

回答ありがとうございます。 IE11ではアラートがでました。仰る通りです。 Chrome（最新）ではアラートが出ませんでしたが、状況は変わりませんでした。

m.ts10806

2018/04/23 02:10 編集

うーん。アラートがでないとひとまず使えることにはなります。もう少しミニマムプログラムを作って確認されたほうが良いかもしれません。 ※作ってるうちにちょっとミニマムじゃなくなってしまったけど・・・。 localstorage対応している場合はボタンクリックすると「hoge」と表示されます。 //コードを回答に移動しました。

mkdsk

2018/04/23 02:21

Chromeの設定を確認したところ、保存をブロックする設定でした。設定変更したところ解消、正常動作しました。いろいろとご指摘ありがとうございます。

m.ts10806

2018/04/23 02:22

「設定によって使えなくなっている可能性」の方に入ってたわけですね。私もそこまで確認できていなかったので1つ勉強になりました。

m.ts10806

2018/04/23 02:37 編集

直接の解決方法はmkdskさんがご自身で見つけられたので、そちらにベストアンサーをつけられてはいかがでしょう？（後で見たときに＋が多いものよりベストアンサーが先に目に付きます）

行動規範の内容に同意します