如何在不刷新页面的情况下更新 HTML data-* 属性

Question

我有一个购物车图标，上面有另一个图标，用于计算购物车中的商品数量。这是代码

CSS：

.fa-stack[data-contador]:after{

 position:absolute;

  right:-10%;

  top:-25%;

  content: attr(data-contador);

  font-size:70%;

  padding:.6em;

  border-radius:999px;

  line-height:.75em;

  color: white;

  background:rgba(255,0,0,.85);

  text-align:center;

  min-width:2em;

  font-weight:bold;

}

HTML

<span class="fa-stack fa-1x has-badge" data-contador="MY NUMBER">

   <i class="fas fa-shopping-cart fa-2x"></i>

</span>

我正在使用 codeigniter 的购物车库并得到这个：

<span class="fa-stack fa-1x has-badge" data-cantidad='<?= $this->cart->total_items(); ?>'>

  <i class="fas fa-shopping-cart fa-2x"></i>

</span>

$this->cart->total_items(); 返回物品的数量

这有效，但仅当我刷新页面时，我的问题是如何在不刷新页面的情况下更新该值。谢谢