While there is life there is hope.
一息若存,希望不滅
用localStorage實現簡易的購物車數量單價和結算頁面兩個頁面的實時同步:
購物車頁面:
實時更新頁面,在input的value發生改變的時候存儲localStorage
<script>
window.onload=function(){
var oNum=document.getElementById('num');
oNum.onchange=function(){
localStorage.apple=oNum.value;
};
};
</script>
</head>
<body>
蘋果:<input type="number" id="num" max="10" min="0" required step="2"/>
單價:20元/個
</body>
結算頁面:
利用onstorage事件實時獲取購物車頁面實時存儲的數據,並計算展示實時的總價格,當然我們可以繼續完善這個頁面
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
window.onstorage=function(ev){
oDiv.innerHTML='共消費¥'+localStorage.apple*20+'元';
};
};
</script>
</head>
<body>
<div>共消費¥元</div>
</body>