Custom Event on localStorage

by Anton Kolesnikov

HTML

<input type="text" id="input" />
<button id="btn">Click me!</button>

<div id="text" class="text">
  Тут текст
</div>

<button id="clear">
  Clear
</button>

Babel + JSX

/* localStorage.setItem upgrade */
var original = localStorage.setItem;
localStorage.setItem = function() {
  original.apply(this, arguments);
  [].forEach.call(document.getElementsByClassName('text'), function(el) {
  	el.dispatchEvent(ls);
  });
}

/* Add in storage */
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
	var input = document.getElementById('input');
  
  localStorage.setItem('cart', JSON.stringify(
  	Object.assign({}, JSON.parse(localStorage.getItem('cart')), {
  	[new Date()]: input.value
    })));
    
}, false)

/* Mini cart */
var text = document.getElementById('text');
text.addEventListener('ls', function() {
	var cart = localStorage['cart'];
  var msg = '';
  
  if (cart !== undefined) {
  	var cartItems = JSON.parse(cart);
  	for (var key in cartItems) {
  		msg += `Время ${key} и значение ${cartItems[key]} \n`;
  	}
  } else {
  	msg = 'Корзина пуста';
  }
  
	text.innerText = msg;
}, true);

var ls = new Event('ls', { bubbles: true, cancelable: true });

window.onload = function() {
	[].forEach.call(document.getElementsByClassName('text'), function(el) {
  	el.dispatchEvent(ls);
  });
}

/* Clear storage */
var clear = document.getElementById('clear');
clear.addEventListener('click', function() {
	localStorage.clear();
  console.log(localStorage['cart']);
}, false);

/*
	Инициализация таблицы товаров
*/