title: localStorage.getItem(...).key is not a function
body: <p>I am getting this error when I ran my todo app. 
  Here is the error,</p>
  
  <pre><code>localStorage.getItem(...).key is not a function
  </code></pre>
  
  <p>Here is the code,</p>
  
  <pre><code>$(document).ready(function(){
      //var count=localStorage.getItem("todo").length;
      $(".submit").click(function(){
          //count++;      
  
          localStorage.setItem("todo", JSON.stringify($('.data').val()));
  
  
          var i;
          while (localStorage.getItem("todo").key(i)) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+JSON.parse(localStorage.getItem("todo").key(i))+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              console.log(localStorage.getItem("todo").key(i));
              i++;
          }
  
      });
      $(".container").on("click", ".todoitem", function(){
          jQuery(this).addClass("strike");
      });
      $(".container").on("click", ".todoremove", function(){
          jQuery(this).closest('.todorow').addClass("hide");
      });
  
      var i;
      while (localStorage.getItem("todo").key(i)) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+JSON.parse(localStorage.getItem("todo").key(i))+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              i++;
      }
  
  });
  </code></pre>
  
  <p>Edit:
  I have updated my code. It does not show any error but it doesn't show todo items.</p>
  
  <pre><code>$(document).ready(function(){
      //var count=localStorage.getItem("todo").length;
      $(".submit").click(function(){
          //count++;      
  
          localStorage.setItem("todo", JSON.stringify($('.data').val()));
  
          var data;
          data = localStorage.getItem("todo");
          var i;
          while (data[i]) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+data[i]+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              console.log(data[i]);
              i++;
          }
  
      });
      $(".container").on("click", ".todoitem", function(){
          jQuery(this).addClass("strike");
      });
      $(".container").on("click", ".todoremove", function(){
          jQuery(this).closest('.todorow').addClass("hide");
      });
      var data=localStorage.getItem("todo")
      var i;
      while (data[i]) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+data[i]+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              i++;
      }
  
  });
  </code></pre>
  
  <p>Edit 2:
  I was able to make the page work with below updates,</p>
  
  <pre><code>$(document).ready(function(){
      var count=localStorage.length;// get count
      console.log($('.data').val());  // whats in the todo 0
      console.log(localStorage.length); // how much data is in the storage
  
      var data = new Array();
  
      var i=0;
          while (i&lt;localStorage.length) {
              data[i]=localStorage.getItem('todo'+i);
              console.log(data[i]);
              i++;
          }
      //var count=localStorage.getItem("todo").length;
      $(".submit").click(function(){
          //count++;      
          data.push($('.data').val());
          localStorage.setItem("todo"+count,$('.data').val());
          count++;
          var i=0;
          $(".todorow").addClass("hide");
          while (i&lt;localStorage.length) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+data[i]+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              console.log(data[i]);
              i++;
          }
  
      });
      $(".container").on("click", ".todoitem", function(){
          jQuery(this).addClass("strike");
      });
      $(".container").on("click", ".todoremove", function(){
          jQuery(this).closest('.todorow').addClass("hide");
      });
  
      var i=0;
          while (i&lt;localStorage.length) {
              var value = "&lt;div class='todorow'&gt;&lt;div class='todoitem'&gt;"+data[i]+"&lt;/div&gt;&lt;div class='todoremove'&gt;X&lt;/div&gt;&lt;/div&gt;";
              $(".container").append(value);
              console.log(data[i]);
              i++;
          }
  
  });
  </code></pre>