localstorageで特定のデータを削除した後に新しくデータが保存できない

現在簡単なメモ帳アプリを制作中で、localstorageに保存したデータをテーブルに反映するところまではうまくいったのですが、特定のデータを削除した後にほかのデータを保存しようとしてもうまくできません。
どなたか教えていただけないでしょうか。

これがデータを保存するプログラムで

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
	<title>jQuery</title>
	<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
	<script>
		$(function(){
		   $("#send").click(function(){
         var data = localStorage.length;
             if(data == 0){
               var num = 1;
             }else{
             	var num = data + 1;
             };
             var date = $("#time").val();
             var task = $("#task").val();
             var priority = $('[name=priority]').val();
             var today = new Date();
             var y = today.getFullYear();
             var m = today.getMonth()+1;
             var d = today.getDate();
             var list = {
                  data1: date,
                  data2: task,
                  data3: priority,
                  data4: y + "/" + m + "/" + d
             };

             localStorage.setItem(num, JSON.stringify(list));
		  });

		   $("#delete").click(function(){

            localStorage.clear();
		   });
		 });
	</script>

<body>
 <style type="text/css">
       
 </style>
	<h1>CREATE NEW TASK</h1>
	<p>日時: <input type="datetime-local" id="time"></p>
	<p>タスク: <input type="text" id="task"></p>
	<p>優先度: <select name="priority">
		<option>選択してください</option>
		<option value="red">最重要</option>
		<option value="yellow">重要</option>
		<option value="blue">後回し</option>
	</select>
  </p>
	<input type="submit" id="send" value="送信"></input>
	<input type="submit" id="delete" value="削除"></input>
</body>
</head>
</html>

こちらがデータをテーブルに反映するときのプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
	<title>jQuery</title>
	<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
	<script>
		
		$(function(){
			$("#send").click(function(){

         
         var lists = localStorage.length; 

         for(var i=1; i<=datas; i++){
         
         var d = JSON.parse(localStorage.getItem(i));
      
            $("<td></td>").text(d.data1).appendTo("#" + i);
            $("<td></td>").text(d.data2).appendTo("#" + i);

            var color = {red:"最重要", yellow:"重要", blue:"後回し"};
            $("<td></td>").text(color[d.data3]).appendTo("#" + i);
            $("<td></td>").text(d.data4).appendTo("#" + i);
            $("<input type='checkbox'/>").attr("id", i).appendTo("#" + i);
            $("<tr></tr>").attr("id", i + 1).insertAfter("#" + i);
           
                };
    
          });
        
       

        $("#delete").click(function(){
         // var length = $("input:checked").length; 
           var idname = $("input:checked").attr("id");
           localStorage.removeItem(idname);
           updateStorage();
            });

        });

	</script>
</head>

<body>
<style type="text/css">
     thead td {
     	width: 150px;
     	height: 30px;
     	background: skyblue;
     	text-align: center;
      font-weight: bold;
     }
     
     tbody td {
      text-align: center;
      font-weight: bold;
      border: 2px solid skyblue;
     }
</style>
   <h1>TASK LIST</h1>
   <input type="submit" id="send" value="送信">
   <input type="submit" id="delete" value="削除">
   
   <table>
     <thead>
       <tr>
       <td>DATE</td>
       <td>TASK</td>
       <td>PRIORITY</td>
       <td>MADE</td>
       <td>CHECK</td>
       </tr>
     </thead>
     <tbody>
        <tr id="1">
          
        </tr>

     </tbody>
   </table>
</body>
</html>

localstorageのkeyに番号を順番に番号をいれて保存しているのですが、一つのkeyを削除してしまうと、そのあとがうまく保存できなくなってしまいます。

kei344

2016/08/11 11:29

「うまく保存できない」とはどういう状況でしょうか。エラーなどは出ていますか？

退会済みユーザー

2016/08/11 11:38

いえ、何も動かない状況ですね。エラーなども出ていないです。例えば、 key : value = 1 : apple 2: banana 3: peach みたいなデータを保存していたとして、key 2を削除するとそのあと新たにデータを保存しようとしても、既存のデータもテーブルに表示できない感じです。

Ryo

2016/08/11 20:18

解決したのであれば、質問を「解決済みに」してください

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

回答1件

とりあえず動かしてみて、エラーが起きたのは

テーブルに反映する方の

javascript
1         var lists = localStorage.length; 
2
3         for(var i=1; i<=datas; i++){
4
5         var d = JSON.parse(localStorage.getItem(i));
6         $("<td></td>").text(d.data1).appendTo("#" + i);
7         $("<td></td>").text(d.data2).appendTo("#" + i);

lists に値をとっているが、for文で datas というのを参照していてエラーが起きました（送信押しても表示されなかった）。

削除に関して追記

削除に関して、数値のキーで登録しているのに、削除したキーであっても構わず iで使っているので、データが取れなくてエラーになっています。
for文の回数はlengthでとっているので正確だけれど、getItemに指定する値が不正になるということです。

例えば最初に3件登録すると

1  {"data1":"2016-12-21T08:01","data2":"なんとなく","data3":"red","data4":"2016/8/11"}	
2  {"data1":"2016-12-21T08:01","data2":"なんとなく","data3":"red","data4":"2016/8/11"}	
3  {"data1":"2016-12-21T08:01","data2":"なんとなく","data3":"red","data4":"2016/8/11"}

こんな感じで登録されます(左の数字がkey）。ところが、2を削除したとき

1  {"data1":"2016-12-21T08:01","data2":"なんとなく","data3":"red","data4":"2016/8/11"}	
3  {"data1":"2016-12-21T08:01","data2":"なんとなく","data3":"red","data4":"2016/8/11"}

です。

しかしfor文で i は、1,2 となるので、 getItem(2) で何もとれていないのに、
後続の処理でその中身にアクセスしようとするのでエラーとなります。

なので、localStorage.key を利用して

var d = JSON.parse(localStorage.getItem(localStorage.key(i-1)));

とすればよいと思います。

あと余談ですが、コンソールにエラーは出てました。

投稿2016/08/11 13:10

編集2016/08/11 13:19

flied_onion

総合スコア2604

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

localstorageで特定のデータを削除した後に新しくデータが保存できない

関連した質問