title: How to store form data in local storage?
body: <p>I am implementing one form submit process, But I am not using any DB(Backend). I want to store form data in client side or browser. So I am planning to use localstorage.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Bootstrap Example&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;      
          &lt;div class=" row "&gt;
              &lt;div class="col-md-6"&gt;
                  &lt;form  method="post"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="usr"&gt;Name&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="usr" placeholder="Enter your name" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="phone"&gt;Phone&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="phone" placeholder="Enter your phone" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="email"&gt;Email&lt;/label&gt;
                          &lt;input type="email" class="form-control" id="email" placeholder="Enter your email" required&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="pwd"&gt;Password&lt;/label&gt;
                          &lt;input type="password" class="form-control" id="pwd" required&gt;
                      &lt;/div&gt;
                      &lt;button type="submit " class="btn btn-success" formaction="../BootStrapTemplate/detail.html"&gt;Submit&lt;/button&gt;
  
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  I want to store data after click on the submit button. And also it will navigate to another page(detail.html page), In detail.html I will display all information.</p>
  
  <p>Some additional information I have to show in detail page, Id and Time.</p>
  
  <p><a href="https://i.stack.imgur.com/xvYy5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xvYy5.png" alt="enter image description here"></a></p>
  
  <p>I want to store data according to ID(means first time saved data id value should be 1, second time saved data value should be 2)</p>
  
  <p>I will use localstorage first time. So I don't know so much about localstorage. Id should be unique per record. 
   According to me it a better idea. If anybody has good idea storing the data in client side, Please let me know. </p>
  
  <p>I have seen one link, But I am not able to do for multiple input fields, And I also want to form of key, value JOSN.</p>