title: How can I keep all values of an array?
body: <p>Here is my code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>li{
    cursor: pointer;
  }
  
   li:hover{
      background-color: #eee;
   }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href='#1'&gt;first post&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='#2'&gt;second post&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href='#3'&gt;third post&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var seen = [];
  $('li').on('click', function(){
  $(this).css('background-color','pink');
  // storing into localstorage
  if (typeof(Storage) !== "undefined") {
      if(!seen.includes($(this).find('a').attr('href'))){
          seen.push($(this).find('a').attr('href'));
          // Set to localStorage
          localStorage.setItem('seen', JSON.stringify(seen));
      }
    }
  });
  
  var seenAlready = JSON.parse(localStorage.getItem('seen'));
  $.each(seenAlready,function(index, value){
     $("a[href="+'"'+value+'"'+"]").parent().css('background-color','pink');
  });
  </code></pre>
  
  <p>As you see in <a href="https://jsfiddle.net/7hww5116/" rel="nofollow noreferrer">this fiddle</a>, that pink color will be remine just for one element <em>(after reloading the page)</em>. Also as you know, that's because of this line:</p>
  
  <pre><code>var seen = [];
  </code></pre>
  
  <p>How can I handle this problem and keep all values of that array?</p>