JSのlocalStorageで複数項目を保存したい

下記のコードなのですが意図としては
テキストエリアに書き込んだものを保存し、表示したい
ということです
ですがうまくいきません
どうすれば解決しますか？

JavaScript
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
6
7    <title></title>
8  </head>
9  <body>
10    <p><input type="text" id="memos1"></p>
11    <p><input type="text" id="memos2"></p>
12    <p><input type="text" id="memos3"></p>
13    <p><input type="text" id="memos4"></p>
14    <p><input type="text" id="memos5"></p>
15    <input type="button" value="save" id="save">
16    <script>
17
18      $(function(){
19
20        if(localStorage.getItem('memos')){
21          for(var i = 1; i < 5; i++){
22            $('#memos'[i]).val(localStorage.getItem('memos'));
23          }
24        }
25
26        $('#save').click(function(){
27          for(var i = 1; i < 5; i++){
28            $('#memos'[i]).val(localStorage.setItem('memos'[i], $('#memos'[i])));
29            console.log(localStorage.getItem('memos'[i]));
30          }
31        });
32
33      });
34    </script>
35
36  </body>
37</html>
38

行動規範の内容に同意します

回答1件

ベストアンサー

javascriptに間違いがあります。以下に記載するソースコードでとりあえず動くと思います。

javascript
1      $(function(){
2        for(var i = 1; i <= 5; i++){
3          if(localStorage.getItem('memos'+i)){
4            $('#memos'+i).val(localStorage.getItem('memos'+i));
5          }
6        }
7
8        $('#save').click(function(){
9          for(var i = 1; i <= 5; i++){
10            localStorage.setItem('memos'+i, $('#memos'+i).val());
11            console.log(localStorage.getItem('memos'+i));
12          }
13        });
14      });

変更前のコードを見るに、localstorageを配列のように使おうとしているように見受けられましたが、localstorageは文字列しか格納できません。
もしも配列を格納したければ、配列を文字列に変換（JSON.stringify等）して格納し、取り出し時も文字列から配列に変換する必要があります。

投稿2017/04/21 01:33