javaScript_ローカルストレージの保存と取得

Question

javaScript_ローカルストレージの保存と取得

解決済

回答 3

投稿 2018/04/23 07:34 ・編集 2018/04/23 11:09

評価
クリップ 1
VIEW 3,503

mkdsk

score 13

前提・実現したいこと

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

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

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

該当のソースコード

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sample</title>
    <style>
    h1 {font-weight:bold; color:#999; padding:3px; }
    body { font-size:14pt; color:#666; }
    </style>
</head>
<body onload="init();">
    <h1>Hello!</h1>
    <p id="msg"></p>
    <input type="text" id="txt1">
    <button onclick="clickBtn();">Click</button>
    <script src="sample.js"></script>
</body>
</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/ツールのバージョンなど）

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

10 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

m.ts10806

2018/04/23 07:43

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

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

キャンセル
mkdsk

2018/04/23 08:09 編集

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

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

キャンセル
m.ts10806

2018/04/23 09:05

<script src="sample.js"></script> を　</body>の直前に持ってきては？

<script src="sample.js"></script> を　</body>の直前に持ってきては？

キャンセル
m.ts10806

2018/04/23 09:06 編集

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

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

キャンセル
maisumakun

2018/04/23 09:09

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

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

キャンセル
m.ts10806

2018/04/23 09:10 編集

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

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

キャンセル
m.ts10806

2018/04/23 09:15 編集

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

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

キャンセル
mkdsk

2018/04/23 10:48

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

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

キャンセル
m.ts10806

2018/04/23 10:49

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

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

キャンセル
mkdsk

2018/04/23 11:10

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

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

キャンセル

回答 3 件

評価が高い順
新着順
古い順

+1

ブラウザ依存があるかもしれないです。
質問者様がご使用しているブラウザは何でしょうか？？
不具合に直接的な関係はないですが、シングルクォートの中のシングルクォートは非推奨なので、ダブルクォートの中にシングルクォートに変更するか、エスケープしましょう。

投稿 2018/04/23 08:54

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/04/23 10:54 編集

使用しているブラウザはChrome、IEです。IEではlocalstorageに対応していない事が解りました。

使用しているブラウザはChrome、IEです。IEではlocalstorageに対応していない事が解りました。

キャンセル

+1

Chromeの設定を確認したところ、保存をブロックする設定でした。設定変更したところ解消、正常動作しました。

投稿 2018/04/23 11:22

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

JavaScript

score 4 · Accepted Answer · 2018-04-23T09:23

ベストアンサー

+4

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

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

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

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

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

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

確認用コード

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

<body>
    <p id="msg"></p>
    <button onclick="clickBtn();">Click</button>

var ls = null;
(window.onload = function() {
    var msg = document.getElementById("msg");
    if(ls_check()){
        ls.setItem('test','hoge');
    }else{
        msg.innerHTML = "localStorage非対応";
    }
})();
function ls_check(){

    if (!window.localStorage) {
        return false;
    }else{
        ls = localStorage;
        return true;
    }
}
function clickBtn(){
    if(ls_check()){
        msg.innerHTML = ls.getItem('test');
    }
}

投稿 2018/04/23 09:23

編集 2018/04/23 11:13

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/04/23 10:51

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

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

キャンセル
2018/04/23 11:03 編集

うーん。アラートがでないとひとまず使えることにはなります。
もう少しミニマムプログラムを作って確認されたほうが良いかもしれません。

※作ってるうちにちょっとミニマムじゃなくなってしまったけど・・・。
localstorage対応している場合はボタンクリックすると「hoge」と表示されます。

//コードを回答に移動しました。

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

キャンセル
2018/04/23 11:21

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

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

キャンセル
2018/04/23 11:22

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

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

キャンセル
2018/04/23 11:23 編集

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

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

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javaScript_ローカルストレージの保存と取得

前提・実現したいこと

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

該当のソースコード

試したこと

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

確認用コード

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javaScript_ローカルストレージの保存と取得

前提・実現したいこと

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

該当のソースコード

試したこと

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

確認用コード

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン