title: Edit, Clear and set expiry time/date on local storage
body: <p>I'm new to HTML and JavaScript, I already done passing the data from page1.html to page2.html through local storage now i'm trying to do is i want to edit the data on page2.html and also will edit the data on page1.html without going to page1.html(<em>if i edit the last name on page2.html, the last name that i put on page1.html will also change</em>) also i want to set an expiry time/date on local storage to delete the data and if i reload or close the window the data on local storage will be deleted.</p>
  <p>Here's what I've done so far to test it:</p>
  <p>page1.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
        function passvalues(){
       var firstname=document.getElementById(&quot;first&quot;).value;
       var name=document.getElementById(&quot;last&quot;).value;
          
             var selectext=document.getElementById(&quot;mycolor&quot;).value;
             
        localStorage.setItem(&quot;firstname&quot;, firstname);
        localStorage.setItem(&quot;lastname&quot;, lastname);
        
          localStorage.setItem(&quot;colorvalue&quot;,selectcolor);
        return true;
        }
  &lt;/script&gt;   
  &lt;/head&gt;
  &lt;body&gt;
  &lt;center&gt;
  &lt;h1&gt;Passing&lt;/h1&gt;
  &lt;hr/&gt;
  &lt;form action=&quot;page2.html&quot;&gt;
  &lt;input type =&quot;text&quot; id=&quot;first&quot;/&gt;
  &lt;input type =&quot;text&quot; id=&quot;last&quot;/&gt;
  
  &lt;select id=&quot;mycolor&quot;&gt;
                        &lt;option &gt;Color&lt;/option&gt;
                        &lt;option&gt;Red&lt;/option&gt;
                        &lt;option &gt;Blue&lt;/option&gt;
                        &lt;option&gt;Purlpe&lt;/option&gt;
                        &lt;option &gt;Green&lt;/option&gt;
                      &lt;/select&gt;
  &lt;input type =&quot;submit&quot; value=&quot;Click&quot; onclick=&quot;passvalues();&quot;/&gt;
  &lt;/form&gt;
  &lt;/center&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  <p>page2.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;center&gt;
  &lt;h1&gt;page2&lt;/h1&gt;
  &lt;hr/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  Welcome.. &lt;span id=&quot;resultfirst&quot;&gt;&lt;/span&gt; 
  Welcome.. &lt;span id=&quot;resultlast&quot;&gt;&lt;/span&gt; 
  Welcome.. &lt;span id=&quot;resultcolor&quot;&gt;&lt;/span&gt; 
  &lt;button id=&quot;edit&quot;&gt;Edit&lt;/button&gt;
  &lt;script&gt;
      document.getElementById(&quot;resultfirst&quot;).innerHTML=localStorage.getItem(&quot;firstname&quot;);
      document.getElementById(&quot;resultlast&quot;).innerHTML=localStorage.getItem(&quot;lastname&quot;);
      
      document.getElementById(&quot;resultcolor&quot;).innerHTML=localStorage.getItem(&quot;colorvalue&quot;);
  &lt;/script&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>