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

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

ただいまの
回答率

90.47%

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScriptでテキストを保存したい

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 2,186

Furisuke

score 93

下記のテキストボックスに書いた文字をページを更新しても初期化されないように保存してロードしたいです
ですがなぜかエラーがでてしまいできません
なぜなのでしょうか?
<body>
<input type="text" id="txt" value="なにか書いて">
<script>
var txt = document.getElementById('txt').value;
window.onload = function() {
       var body_txt = localStorage.getItem('txt');
       if (body_txt != null){
             txt.value = body_txt;
        }
txt.onchange = function() {
            localStorage.setItem('txt',txt.value);
            }
</script>
</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

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

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

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

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

    評価を下げる理由を選択してください

    詳細な説明はこちら

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

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

エラーの出ている原因ですが
window.onload = function() {の閉じ忘れです。 最後に};を追加してみてください。
var txt = document.getElementById('txt').value;
window.onload = function() {
  var body_txt = localStorage.getItem('txt');
  if (body_txt != null){
    txt.value = body_txt;
  }
  txt.onchange = function() {
    localStorage.setItem('txt',txt.value);
  };
}; // ←これ


また、localStorageへの保存が意図した通りに動作していないのは、inputではなく、inputのvalueの文字列に対して.onchangeイベントをつけたり.valueを取得しようとしていたりしているので意図したとおりに動作してないのかと思います。

var inputText = document.getElementById('txt');
var txt = inputText.value;
window.onload = function() {
  var body_txt = localStorage.getItem('txt');
  if (body_txt != null){
    // inputタグのvalueにbody_txtを入れる
    inputText.value = body_txt;
  }
  // inputにonchangeイベントをつける
  inputText.onchange = function() {
    // inputタグのvalueを取得して保存する
    localStorage.setItem('txt', inputText.value);
  };
};

また、このままでは、保存された文字列の取得に関してですが、inputタグの中身を全部消した時も、onchangeイベントが発生してlocalStorageに保存されます。
そして、localStorage.getItem('txt'); の値はnullではなく、""空文字列になりますので、ロードした段階で空文字列がinputタグに入れられてしまいます。
恐らくこれは意図しない動作かと思いますので、保存時に空文字列であれば保存しないようにするか、ロード時に空文字列であればinputタグに値を入れないようにするかをしてあげたほうが良いかと思います。
全角スペースも保存されてしまいますので、コレも意図しないのであれば、inputタグの値が変更された時に、全角/半角スペースをtrimしてあげる処理を入れて、上記の空文字列の判別と組み合わせれば意図したと通りの動きになるかと思います。

取り急ぎ作った動作保証をしていないサンプルを載せておきます。処理を追加する参考になれば幸いです。
// trimメソッドがなければ追加する
if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

var inputText = document.getElementById('txt');
var txt = inputText.value;
window.onload = function() {
  var body_txt = localStorage.getItem('txt');
  // 空文字列もNGにする
  if (body_txt){
    inputText.value = body_txt;
  }
  inputText.onchange = function() {
    var inputVal = inputText.value.trim();
    // trimしても値があるときだけ保存
    if(inputVal) {
      localStorage.setItem('txt', inputVal);
    }
  };
};

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/19 10:09

    回答ありがとうございます
    var body_txt = localStorage.getItem('txt');
    localStorage.setItem('txt', inputText.value);
    の部分の'txt'というのはvar txtのことですか?それともid="txt"のことですか?

    キャンセル

  • 2015/08/19 10:22

    var body_txt = localStorage.getItem('txt');と
    localStorage.setItem('txt', inputText.value);の
    txtはFurisukeさまが元々書かれていた内容のままなのですが、
    これは、inputタグのIDを指定しているのではなく、
    localStorage.getItem('txt');は
    ローカルストレージから'txt'という名前で保存されたデータを探して取ってくる。
    localStorage.setItem('txt', inputText.value);は
    'txt'という名前で、ローカルストレージに inputText.value という値を保存する。
    というローカルストレージに保存する際のキーになる文字列です。

    参考
    localStorage基本操作 - Qiita
    http://qiita.com/ichikawa_0829/items/85413fedc59822ccef75

    キャンセル

  • 2015/08/19 13:25 編集

    To: KiKiKi_KiKiさん
    > 全角/半角スペースをtrimしてあげる処理を入れて...
    > return this.replace(/^\s+|\s+$/g,'');
    \s は ES3 当時から Unicode 規定の全角空白を含みますが、JScript な IE8- では [ \f\n\r\t\v] になる為、Polyfill コードとしては適切ではないと思います。
    http://togetter.com/li/43953
    大分前に書いたコードでアレですが、私が書くとこうなります。
    https://gist.github.com/think49/630648#file-ecmascript5-js-L131

    キャンセル

  • 2015/08/19 13:36 編集

    think49さま
    ご指摘ありがとうございます。IEとか殆ど対応しなくてよいサービスの開発などの環境で仕事してきたこともあり特に古いIEの独自ルール解ってない点が多いので大変参考になります!
    あ。そもそも古いIEってlocalStorage手動でONにしないと機能しないんでしたっけ???

    キャンセル

  • 2015/08/19 15:04

    > var txt = inputText.value;
    今更ですが、後半のコードでは変数 txt の宣言文が省略出来るのではないでしょうか(後で参照した形跡がない)。

    > あ。そもそも古いIEってlocalStorage手動でONにしないと機能しないんでしたっけ???
    [DOM ストレージを有効にする] でしたっけ…。
    欲をいえば、IE7 対策に localStorage で ReferenceError を発生させない配慮が欲しいですね。
    KiKiKi_KiKi さんのポリシーでは IE8+ が対象なのでしょうか(String#trim がある時点で IE9+ ではないと予想)。
    # 別記事で気にしておられたようなので伝えておきますが、私は技術的な指摘については歓迎する性質なので遠慮なくご指摘下さい。

    キャンセル

  • 2015/08/19 15:16

    think49さま
    >> var txt = inputText.value;
    > 今更ですが、後半のコードでは変数 txt の宣言文が省略出来るのではないでしょうか(後で参照した形跡がない)。
    ああ。不要ですね。なんで残ってるんでしょうね?と思ったら元々あったコードの部分をそのままペタッと残しているだけでした。最適なコードとしては不要で間違いありません!

    僕のポリシーってほどのものは無いのですが、直近までいた会社が海外の会社だったせいか基本的にIEは無視してOK。余力があればIE9以上くらい考えといてね!くらいだったので、最近では特段IEの調査をしておりませんでしたから、昔の記憶のおまじないみたいにコードを入れちゃってる部分も多分に発生しているという状況でございます。

    キャンセル

関連した質問

  • 解決済

    AngularJSでコントローラーにパラメータを渡すことはできますか?

    AngularJSを用いてシステムを作っています。 コントローラー側で、APIを用い、ユーザー名などを更新させようと考えています。 ng-controller経由で、idを以下の

  • 受付中

    window.open で開いた htmlに呼び出しもとのjavascript の変数を渡し、タイ

    ある html 内に javascript の変数が設定されていて それを window.open で呼び出した child.html に引き渡したい。 呼び出された child

  • 受付中

    innerHTMLの追加と削除

    こんにちは 現在JSでToDoメモのようなものを作ろうと思っているのですが 問題点が2つ出てきました。 1、innerHTMLにtextに書き込まれた内容を書き込めるが追加ができな

  • 受付中

    JSのテキスト保存について

    下記のコードはテキストボックスに書かれた文字をinnerHTMLで書き出しそれを更新しても消えない、保存するというプログラムです。 ですが肝心の保存ができません なぜでしょうか?

  • 受付中

    JavaScriptのlocalstorage

    下記のコードは収支を計算するコードです もとのお金を入力し、ボタンを押せばその日の収入を入力して計算し結果を表示して保存するというコードなのですが保存ができません どうすればできま

  • 受付中

    JavaScriptの変数の更新

    下記のコードはプロンプトで入力された数字をinnerHTMLに表示し保存するというコードです。 そこまではうまくいくのですがこれを 次回入力された数字が前回より大きな数字だった場合

  • 受付中

    JSのToDoメモ制作について

    以下のコードはJavaScriptのToDoメモです。 書き込んだ内容を追加、保存はうまくいったのですが削除がうまくいきません。削除ボタンを押すとすべて消えてしまいます。 どうすれ

  • 受付中

    JSで任意のinnerHTMLを削除したい

    先日同じような質問をさせていただいたのですが初心者の私にはとても難しく理解できなかったのでもう一度質問させていただきます 下記のコードはテキストボックスで受け取った内容をinner

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

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。