<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="form-group"> <label>Set Cookie:</label> <input type="text" class="form-control" id="cookie_input"> <br> <button class="btn btn-block btn-success" id="submit"> Submit </button> </div> </div> </div> <script> class cookie { constructor() { this.$input = $("#cookie_input"); this.$submit = $("#submit"); this.engine = false; } start() { this.$submit.on("click", this, function(e){ var self = e.data; self.engine = true; var input = self.$input.val(); self.$submit.html("Updating"); self.update(self, input); }); } update(self, input) { if(self.engine == true){ var cart = localStorage.getItem("cart"); if(cart == null){ var temp = { "cart": [] }; cart = JSON.stringify(temp); localStorage.setItem("cart", cart); cart = localStorage.getItem("cart"); console.log(cart); cart = JSON.parse(cart); cart = cart.cart.push(input); cart = JSON.stringify(cart); } else { cart = JSON.parse(cart); console.log(localStorage.getItem("cart")); cart = cart.cart.push(input); cart = JSON.stringify(cart); } self.engine = false; localStorage.setItem("cart", cart); alert("Update Complete"); self.$submit.html("Submit"); } } } </script> <script> window.cookie = new cookie(); window.cookie.start(); </script>