Local Storage not storing/retrieving value : <p>This is my code:</p>

<pre><code>    &lt;select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onchange="document.form.submit();"&gt;
    &lt;script&gt;
     var cat = localStorage.getItem('category');
     localStorage.setItem('category', cat);
    &lt;/script&gt; 
        &lt;option value="" disabled selected&gt;Select Category&lt;/option&gt;
    &lt;?php
    $sth = $conn-&gt;prepare('Select name From category');
    $sth-&gt;execute();
    $data = $sth-&gt;fetchAll();   
    foreach ($data as $row ){
        if($row['name']!="")
     echo ' &lt;option id=\"CategoryName\" nameCategoryNameVendorName\" value="' .$row['name']. '"&gt;'.$row['name'].'&lt;/option&gt;';
    }
    ?&gt; 
    &lt;/select&gt;
</code></pre>

<p>I want the selected value of the drop down 'category' to be retrieved in the drop down even after the page is submitted by <code>onchange="document.form.submit();"</code>. Why isn't it happening?</p>
