javascript - localStorage で値が削除されない

Question

localStorage を使用して todo アプリを作成する方法を学んでいます。Blackberry 10 Jquery テーマを使用してこのアプリを作成しています。問題は、localStorage の removeItem 関数が機能しない場合があることです。

ここでJSFiddleを参照してください

問題を再現する手順:

1. リストにアイテムを挿入します。
2. スワイプして複数のアイテムをすばやく削除します。
3. ページを再読み込みして、2 ～ 3 個の項目がまだ画面に表示され、削除されていないことを確認します。

問題が発生するまで、これを時々繰り返してください。この問題の原因は何ですか?

コード：

HTML

<div id="home" data-role="page" data-theme="a">
    <div data-role="content">
        <form id="tasks-form">
            <input type="text" name="text-input" id="task" autofocus placeholder="Enter Text Here" />
        </form>
        <div id="tasks"></div>
    </div>
</div>

Javascript

        var i = 0;
       // Initial loading of tasks
       for( i = 0; i < localStorage.length; i++)
         $("#tasks").prepend("<li id='task-"+ i +"'>" + localStorage.getItem('task-'+i) +"</li>");

       // Add a task
       $("#tasks-form").submit(function() {
         if (  $("#task").val() !== "" ) {
           localStorage.setItem( "task-"+i, $("#task").val() );
           $("#tasks").prepend("<li id='task-"+i+"'>"+localStorage.getItem("task-"+i)+"</li>");
           $("#task-" + i).css('display', 'none');
           $("#task-" + i).slideDown();
           $("#task").val("");
           i++;
         }
         return false;
       });


       $(document.body).on("swiperight","li",function() {
         localStorage.removeItem($(this).attr("id"));

     $(this).animate(
                    {
                        'margin-left':'600px','opacity':'0'
                    },'swing',
                    function(){

                        $(this).slideUp('fast',function(){$(this).remove();});
                }
                    );

         for(i=0; i<localStorage.length; i++) {
           if( !localStorage.getItem("task-"+i)) {
             localStorage.setItem("task-"+i, localStorage.getItem('task-' + (i+1) ) );
             localStorage.removeItem('task-'+ (i+1) );
           }
         }
       });