title: Refresh background pages using Javascript?
body: <p><strong>Scenario :</strong></p>
  
  <ul>
  <li>Working on an e-commerce website. </li>
  <li>I have put together a <strong>function which</strong> : 
  
  <ul>
  <li>updates the total number of
  items in the basket icon, and</li>
  <li>also adjusts it when the user increases
  or decreases the qty amount for an item in the actual basket page. </li>
  <li>I am using local storage to fetch and update the information.</li>
  </ul></li>
  </ul>
  
  <p><br></p>
  
  <ul>
  <li>This particular basket page opens up in a new window. The basket icon is shown in pretty much all other pages of the website.</li>
  </ul>
  
  <p><strong>Problem :</strong></p>
  
  <ul>
  <li>Even if the user has another page open in the background, I want that page to also refresh to reflect the new qty amount displayed in the basket icon, the second they adjusts the qty amount from the basket page.</li>
  <li>When the user closes the basket page and wants to continue
  shopping, the original page - prior to opening the basket page - has
  the updated number of items in the basket icon.</li>
  <li>There are three ways a user can adjust the number of items in the basket. Each product has an increase / decrease button, and also an input field where the user can enter a number manually and the basket qty icon will reflect the new change.</li>
  </ul>
  
  <blockquote>
    <p>Following function will change the qty of the item when user clicks either increase or decrease symbol</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>document.body.addEventListener("click", function(e) {
      var reg = /\w{7}\d+/g;
      if (e.target.classList[0] === "increaseQty") {
          var getItem = getLocalStorageData("basketData");
          getItem.basketQty++;
          document.getElementById("item-count").innerHTML = getItem.basketQty;
          e.target.previousSibling.value++;
          var currentProduct = e.target.previousSibling.id;
          currentProduct = currentProduct.match(reg);
          currentProduct = currentProduct.toString();
          getItem[currentProduct]++;
          updateLocalStorage(getItem);
          for (var i = 0; i &lt; productCats.length; i++) {
              if (productCats[i][currentProduct]) {
                  var currentPrice = e.target.previousSibling.value * productCats[i][currentProduct].price;
                  var currentLi = e.target.parentNode;
                  currentLi.parentNode.lastChild.innerHTML = "£" + currentPrice;
                  getTotalCost();
              }
          }
      } else if (e.target.classList[0] === "decreaseQty") {
          if (e.target.nextSibling.value &gt; 0)
              var getItem = getLocalStorageData("basketData");
          getItem.basketQty--;
          document.getElementById("item-count").innerHTML = getItem.basketQty;
          e.target.nextSibling.value--;
          var currentProduct = e.target.nextSibling.id;
          currentProduct = currentProduct.match(reg);
          currentProduct = currentProduct.toString();
          getItem[currentProduct]--;
          updateLocalStorage(getItem);
          for (var i = 0; i &lt; productCats.length; i++) {
              if (productCats[i][currentProduct]) {
                  var currentPrice = e.target.nextSibling.value * productCats[i][currentProduct].price;
                  var currentLi = e.target.parentNode;
                  currentLi.parentNode.lastChild.innerHTML = "£" + currentPrice;
                  getTotalCost();
              }
          }
      } else {
          return;
      }
  })
  
  $("#basket-content").on("change", 'input[name="nameQty"]', function() {
      var getItem = getLocalStorageData("basketData");
      var regNum = /\d+/;
      var currentQty = this.id;
      var currentVal = this.value;
      var reg = /\w{7}\d+/g;
      var product = currentQty.match(reg);
      product = product.toString();
      if (!regNum.test(currentVal) || currentVal &lt; 0) {
          alert("Please enter a valid number");
          document.getElementById(currentQty).value = getItem[product];
          return;
      } else if (currentVal &gt; getItem[product]) {
          var addQty = currentVal - getItem[product];
          getItem.basketQty += addQty;
          document.getElementById("item-count").innerHTML = getItem.basketQty;
          getItem[product] = currentVal;
      } else if (currentVal &lt; getItem[product]) {
          var minusQty = getItem[product] - currentVal;
          getItem.basketQty -= minusQty;
          document.getElementById("item-count").innerHTML = getItem.basketQty;
          getItem[product] = currentVal;
      }
      for (var i = 0; i &lt; productCats.length; i++) {
          if (productCats[i][product]) {
              var currentPrice = currentVal * productCats[i][product].price;
              document.getElementById(currentQty).parentNode.nextSibling.innerText = "£" + currentPrice.toFixed(2);
              getTotalCost();
          }
      }
      updateLocalStorage(getItem);
  });
  </code></pre>