エラーの出ている原因ですが
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 01:09
2015/08/19 01:22
2015/08/19 04:37 編集
2015/08/19 04:41 編集
2015/08/19 06:04
2015/08/19 06:16