title: localStorage conflicts with Javascript function
body: <p>I'm using <code>localStorage</code> to save values filled in HTML form after refreshing browser in following:</p>
  
  <pre><code>&lt;form id="localStorageTest" method="post" action=""&gt;
              &lt;label&gt;Name:&lt;/label&gt;
              &lt;input type="text" name="name" id="name" class="stored" value="" /&gt;
  
              &lt;label&gt;Email:&lt;/label&gt;
              &lt;input type="email" name="email" id="email" class="stored" value="" /&gt;
  
              &lt;label&gt;Message:&lt;/label&gt;
              &lt;textarea name="message" id="message" class="stored"&gt;&lt;/textarea&gt;
  
              &lt;input type="submit" class="demo-button" value="Submit" /&gt;
          &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      function init() {
          if (localStorage["name"]) {
              $('#name').val(localStorage["name"]);
          }
          if (localStorage["email"]) {
              $('#email').val(localStorage["email"]);
          }
          if (localStorage["message"]) {
              $('#message').val(localStorage["message"]);
          }
      }
      init();
  });
  
  $('.stored').change(function () {
      localStorage[$(this).attr('name')] = $(this).val();
  });
  
  $('#localStorageTest').submit(function() {
      localStorage.clear();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Alone code above working correctly, but If I'm using Javascript function in <code>&lt;head&gt;&lt;/head&gt;</code> section It stop filling values.</p>
  
  <p>This is Javascript function where I found conflict, If I'm removing It, <code>localStorage</code> working correctly.</p>
  
  <pre><code>$(function() {
      $("[type=date]").datepicker({
          monthNamesShort: $.datepicker.regional["en"].monthNames,
          changeMonth: true,
          changeYear: true,
          dateFormat: 'yy-mm-dd',
          yearRange: "-116:+10"
      });
  });
  $.fn.optionTest = function(opts) {
      var option = $.extend({}, $.fn.optionTest.defaults, opts);
      $(this).change(function() {
          option.holderObject = $(this);
          if (option.clearOnChange) {
              $(option.actionId).empty();
          }
          var val = $(this).val();
          if ($.fn.optionTest.isArray(val)) {
              $.fn.optionTest.parseArray(val, option);
          } else {
              var label = $(this).children("option:selected").eq(0).text();
              $.fn.optionTest.parseContent(val, option, label);
          }
          $('.' + option.removeLinkOptions.class).click(function(event) {
              $.fn.optionTest.removeRow(this, option);
              event.preventDefault();
          });
  
          $("[type=date]").datepicker({
              monthNamesShort: $.datepicker.regional["en"].monthNames,
              changeMonth: true,
              changeYear: true,
              dateFormat: 'yy-mm-dd',
              yearRange: "-116:+10",
          });
          return this;
      });
  };
  </code></pre>
  
  <p>I found strange thing, even if I'm leaving only: </p>
  
  <pre><code>$.fn.optionTest = function(opts) {
  
  };
  </code></pre>
  
  <p>Or only this (without <code>$.fn.optionTest</code>):</p>
  
  <pre><code>$(function() {
      $("[type=date]").datepicker({
          monthNamesShort: $.datepicker.regional["en"].monthNames,
          changeMonth: true,
          changeYear: true,
          dateFormat: 'yy-mm-dd',
          yearRange: "-116:+10"
      });
  });
  </code></pre>
  
  <p><code>localStorage</code> still not filling data. Why It happens? How can I solve It?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've changed It like this, but still the same:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      function init() {
          if (localStorage["name"]) {
              $('#name').val(localStorage["name"]);
          }
          if (localStorage["email"]) {
              $('#email').val(localStorage["email"]);
          }
          if (localStorage["message"]) {
              $('#message').val(localStorage["message"]);
          }
      }
      init();
  
      $('.stored').change(function () {
          localStorage[$(this).attr('name')] = $(this).val();
      });
  
      $('#localStorageTest').submit(function() {
          localStorage.clear();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm using this code below HTML form.</p>
  
  <p>And as mentioned before If I'm removing below function from <code>&lt;head&gt;&lt;/head&gt;</code> It starts working... </p>
  
  <pre><code>$.fn.optionTest = function(opts) {
     .....
  }; 
  </code></pre>