回答編集履歴

3

サンプルを追加

2015/08/19 01:17

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -77,3 +77,57 @@
77
77
  恐らくこれは意図しない動作かと思いますので、保存時に空文字列であれば保存しないようにするか、ロード時に空文字列であればinputタグに値を入れないようにするかをしてあげたほうが良いかと思います。
78
78
 
79
79
  全角スペースも保存されてしまいますので、コレも意図しないのであれば、inputタグの値が変更された時に、全角/半角スペースをtrimしてあげる処理を入れて、上記の空文字列の判別と組み合わせれば意図したと通りの動きになるかと思います。
80
+
81
+
82
+
83
+ 取り急ぎ作った動作保証をしていないサンプルを載せておきます。処理を追加する参考になれば幸いです。
84
+
85
+ ```javascript
86
+
87
+ // trimメソッドがなければ追加する
88
+
89
+ if(!String.prototype.trim) {
90
+
91
+ String.prototype.trim = function () {
92
+
93
+ return this.replace(/^\s+|\s+$/g,'');
94
+
95
+ };
96
+
97
+ }
98
+
99
+
100
+
101
+ var inputText = document.getElementById('txt');
102
+
103
+ var txt = inputText.value;
104
+
105
+ window.onload = function() {
106
+
107
+ var body_txt = localStorage.getItem('txt');
108
+
109
+ // 空文字列もNGにする
110
+
111
+ if (body_txt){
112
+
113
+ inputText.value = body_txt;
114
+
115
+ }
116
+
117
+ inputText.onchange = function() {
118
+
119
+ var inputVal = inputText.value.trim();
120
+
121
+ // trimしても値があるときだけ保存
122
+
123
+ if(inputVal) {
124
+
125
+ localStorage.setItem('txt', inputVal);
126
+
127
+ }
128
+
129
+ };
130
+
131
+ };
132
+
133
+ ```

2

空文字列でもlocalStorageから読みだしてしまう問題

2015/08/19 01:17

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

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

1

localStorageへの保存がうまく行ってない原因について

2015/08/19 01:03

投稿

KiKiKi_KiKi
KiKiKi_KiKi

スコア596

test CHANGED
@@ -25,3 +25,45 @@
25
25
  }; // ←これ
26
26
 
27
27
  ```
28
+
29
+
30
+
31
+ ---
32
+
33
+
34
+
35
+ また、localStorageへの保存が意図した通りに動作していないのは、inputではなく、inputのvalueの文字列に対して`.onchange`イベントをつけたり`.value`を取得しようとしていたりしているので意図したとおりに動作してないのかと思います。
36
+
37
+
38
+
39
+ ```javascript
40
+
41
+ var inputText = document.getElementById('txt');
42
+
43
+ var txt = inputText.value;
44
+
45
+ window.onload = function() {
46
+
47
+ var body_txt = localStorage.getItem('txt');
48
+
49
+ if (body_txt != null){
50
+
51
+ // inputタグのvalueにbody_txtを入れる
52
+
53
+ inputText.value = body_txt;
54
+
55
+ }
56
+
57
+ // inputにonchangeイベントをつける
58
+
59
+ inputText.onchange = function() {
60
+
61
+ // inputタグのvalueを取得して保存する
62
+
63
+ localStorage.setItem('txt', inputText.value);
64
+
65
+ };
66
+
67
+ };
68
+
69
+ ```