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

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

ただいまの
回答率

87.95%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,313

score 12

現在簡単なメモ帳アプリを制作中で、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を削除してしまうと、そのあとがうまく保存できなくなってしまいます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/11 20:29

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

    キャンセル

  • YutaKobayashi

    2016/08/11 20:38

    いえ、何も動かない状況ですね。
    エラーなども出ていないです。

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

    キャンセル

  • Ryo

    2016/08/12 05:18

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

    キャンセル

回答 1

+1

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

テーブルに反映する方の

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);

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)));

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る