1

我正在学习如何使用 localStorage 制作待办事项应用程序。我正在使用 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>

Javascipt

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

0 回答 0