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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

1回答

6101閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2015/08/19 00:28

下記のテキストボックスに書いた文字をページを更新しても初期化されないように保存してロードしたいです
ですがなぜかエラーがでてしまいできません
なぜなのでしょうか?

JavaScript

1<body> 2<input type="text" id="txt" value="なにか書いて"> 3<script> 4var txt = document.getElementById('txt').value; 5window.onload = function() { 6 var body_txt = localStorage.getItem('txt'); 7 if (body_txt != null){ 8 txt.value = body_txt; 9 } 10txt.onchange = function() { 11 localStorage.setItem('txt',txt.value); 12 } 13</script> 14</body>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

エラーの出ている原因ですが
window.onload = function() {の閉じ忘れです。 最後に};を追加してみてください。

javascript

1var txt = document.getElementById('txt').value; 2window.onload = function() { 3 var body_txt = localStorage.getItem('txt'); 4 if (body_txt != null){ 5 txt.value = body_txt; 6 } 7 txt.onchange = function() { 8 localStorage.setItem('txt',txt.value); 9 }; 10}; // ←これ

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

javascript

1var inputText = document.getElementById('txt'); 2var txt = inputText.value; 3window.onload = function() { 4 var body_txt = localStorage.getItem('txt'); 5 if (body_txt != null){ 6 // inputタグのvalueにbody_txtを入れる 7 inputText.value = body_txt; 8 } 9 // inputにonchangeイベントをつける 10 inputText.onchange = function() { 11 // inputタグのvalueを取得して保存する 12 localStorage.setItem('txt', inputText.value); 13 }; 14};

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

取り急ぎ作った動作保証をしていないサンプルを載せておきます。処理を追加する参考になれば幸いです。

javascript

1// trimメソッドがなければ追加する 2if(!String.prototype.trim) { 3 String.prototype.trim = function () { 4 return this.replace(/^\s+|\s+$/g,''); 5 }; 6} 7 8var inputText = document.getElementById('txt'); 9var txt = inputText.value; 10window.onload = function() { 11 var body_txt = localStorage.getItem('txt'); 12 // 空文字列もNGにする 13 if (body_txt){ 14 inputText.value = body_txt; 15 } 16 inputText.onchange = function() { 17 var inputVal = inputText.value.trim(); 18 // trimしても値があるときだけ保存 19 if(inputVal) { 20 localStorage.setItem('txt', inputVal); 21 } 22 }; 23};

投稿2015/08/19 00:43

編集2015/08/19 01:17
KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/08/19 01:09

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

2015/08/19 01: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
think49

2015/08/19 04:37 編集

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
KiKiKi_KiKi

2015/08/19 04:41 編集

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

2015/08/19 06:04

> var txt = inputText.value; 今更ですが、後半のコードでは変数 txt の宣言文が省略出来るのではないでしょうか(後で参照した形跡がない)。 > あ。そもそも古いIEってlocalStorage手動でONにしないと機能しないんでしたっけ??? [DOM ストレージを有効にする] でしたっけ…。 欲をいえば、IE7 対策に localStorage で ReferenceError を発生させない配慮が欲しいですね。 KiKiKi_KiKi さんのポリシーでは IE8+ が対象なのでしょうか(String#trim がある時点で IE9+ ではないと予想)。 # 別記事で気にしておられたようなので伝えておきますが、私は技術的な指摘については歓迎する性質なので遠慮なくご指摘下さい。
KiKiKi_KiKi

2015/08/19 06:16

think49さま >> var txt = inputText.value; > 今更ですが、後半のコードでは変数 txt の宣言文が省略出来るのではないでしょうか(後で参照した形跡がない)。 ああ。不要ですね。なんで残ってるんでしょうね?と思ったら元々あったコードの部分をそのままペタッと残しているだけでした。最適なコードとしては不要で間違いありません! 僕のポリシーってほどのものは無いのですが、直近までいた会社が海外の会社だったせいか基本的にIEは無視してOK。余力があればIE9以上くらい考えといてね!くらいだったので、最近では特段IEの調査をしておりませんでしたから、昔の記憶のおまじないみたいにコードを入れちゃってる部分も多分に発生しているという状況でございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問