LocalStorage

Storing more complex data in localStorage

by Austin Anderson

HTML

<label for="item">Item</label>
<input type="text" id="item" value="#">
<label for="productType">Product Type</label>
<input type="text" id="productType" value="CoreCurriculum">
<label for="profitProductId">Profict Product Id</label>
<input type="text" id="profitProductId" value="#">
<label for="deadline">Deadline</label>
<input type="text" id="deadline" value="STANDARD">
<label for="pricingType">Pricing Type</label>
<input type="text" id="pricingType" value="ACADEMIC">
<label for="WebArchiveFormat">Web Archive Format</label>
<input type="text" id="WebArchiveFormat" value="DVD">
<br />
<button id="subBtn" type="submit">Add To Cart</button>
<button id="clearBtn" type="button">Clear Storage</button>
<br />
<br />
<a id="gotoBtn" type="button" href="https://estore.barnettinternational.com/Checkout/" target="_blank">Go to store</a>
<span id="storeLink"></span>

<br />
<br />
<br />
Item Count: <span id="itemCount"></span>

CSS

input {
    display: block;
}

.myProperties {
    list-style: none;
}

.remove,
.view {
    color: blue;
    cursor: pointer;
}
label {
  font-weight:bold;
}
input {
  margin-bottom: 5px;
}

JavaScript

(function() {
  var customerId = "0";


  const PRODUCT_TYPES = Object.freeze({
    "CoreCurriculum": "CoreCurriculum",
    "WebSeminar": "WebSeminar",
    "OnBoardingProgram": "OnBoardingProgram",
    "OnDemandeLearning": "OnDemandeLearning",
    "WebSeminarArchive": "WebSeminarArchive",
    "Publication": "Publication"
  });


  // get submit button and add event handler
  var subBtn = document.getElementById('subBtn');
  subBtn.addEventListener('click', addToCart, false);

  // get submit button and add event handler
  var clearBtn = document.getElementById('clearBtn');
  clearBtn.addEventListener('click', removeLocalStorage, false);


  function addToCart() {
    console.log('adding...');
    var item = document.getElementById('item');
    var productType = document.getElementById('productType');
    
    //This is always the courseId unless its a publication then its the publicationId
    var profitProductId = document.getElementById('profitProductId');
    //
    
    var deadline = document.getElementById('deadline');
    var pricingType = document.getElementById('PricingType');
    var webArchiveFormat = document.getElementById('WebArchiveFormat');

    var data = {
      'ProductType': productType,
      'ProfitProductId': profitProductId
    };
    
    var baseUrl = "https://estore.barnettinternational.com/api/BarnettCheckout/AddToCart?";
    baseUrl += "ProductType=" + productType;
    baseUrl += "&ProfitProductId=" + profitProductId; 

    switch (productType) {
      case PRODUCT_TYPES.CoreCurriculum:
      case PRODUCT_TYPES.WebSeminar:
      case PRODUCT_TYPES.OnBoardingProgram:
        baseUrl += "&Deadline=" + deadline;
        baseUrl += "&PricingType=" + pricingType;
        break;
      case PRODUCT_TYPES.OnDemandeLearning:
      case PRODUCT_TYPES.Publication:
        break;
      case PRODUCT_TYPES.WebSeminarArchive:
        baseUrl += "&PricingType=" + pricingType;
        baseUrl += "&WebArchiveFormat=" + webArchiveFormat;
        break;
...