localStorage實現購物車數量單價和結算頁面的實時同步


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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM