码迷,mamicode.com
首页 > 其他好文 > 详细

localStorage实现购物车数量单价和结算页面的实时同步

时间:2016-11-01 07:28:46      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:cal   利用   数据   计算   on()   type   tor   tag   oca   

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>

localStorage实现购物车数量单价和结算页面的实时同步

标签:cal   利用   数据   计算   on()   type   tor   tag   oca   

原文地址:http://www.cnblogs.com/jasonwang2y60/p/6018092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!