title: How to set an item limit on localstorage items Javascript HTML5
body: <p>I am trying to set a limit of 6 items to localstorage and also retrieve the items back. So for example if a user types in data into an input box with id #gsc-i-id2 and clicks the .gsc-search-button-v2, the data gets stored in localstorage which all works fine but I want to limit this to the 6 most recent input's, in the code i've tried using .shift but i'm very new to localstorage and js and i'm not sure what i'm doing wrong here. It does display only 6 items but doesn't shit the items up. any help would be very much appreciated.</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-js lang-js prettyprint-override"><code>(function() {
  
      var propertiesList = document.getElementById('list');
      var myProperties;
      var obj;
      if (window.localStorage.getItem('Address')) {
        displayStorage();
      }
    
      // function to display localStorage contents on page load
      function displayStorage() {
        var data = "";
        myProperties = JSON.parse(localStorage.getItem('Address'));
    
        // if localStorage array is not empty
        if (myProperties.length !== 0) {
    
          for (var i = 0; i &lt; myProperties.length; i++) {
    
            var li = document.createElement('li');
            data += myProperties[i].address + " ";
            li.innerHTML = data;
            data = '';
            propertiesList.appendChild(li);
    
          }
        }
      }
      $("body").on('click', '.gsc-search-button-v2', function(index) {
        var address = document.getElementById('gsc-i-id2');
        obj = {};
        obj.address = address.value;
        myProperties = JSON.parse(localStorage.getItem('Address')) || [];
        myProperties.push(obj);
        localStorage.setItem('Address', JSON.stringify(myProperties));
          addToPropertiesList();
      })
    
      function addToPropertiesList(e) {
  
        var len = myProperties.length - 1;
        var li = document.createElement('li');
        var data = '';
        data += myProperties[len].address + " ";
        li.innerHTML = data;
        if(len &gt; 5){
          myProperties.shift(li);
        } else{
        propertiesList.appendChild(li);
        }
      }
    
    }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id2" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: -0.0625em 0px 0px; height: 1.25em; background: rgb(255, 255, 255); outline: none;"&gt;
  
  &lt;td class="gsc-search-button"&gt;&lt;button class="gsc-search-button gsc-search-button-v2"&gt;&lt;svg width="13" height="13" viewBox="0 0 13 13"&gt;&lt;title&gt;search&lt;/title&gt;&lt;path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/td&gt;
  
  &lt;ul id="list"&gt;&lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>