localStorage的跨页面通信运用，以购物车为例
说到这里，就不得不说一下onstorage事件了，当存储空间中数据发生变化的时候触发该事件，以下例子中有实际运用。
需要有两个HTML文件，第一个文件用来存数据，第二个文件用来取数据，具体代码如下：
物品界面.html
<script>
document.addEventListener('DOMContentLoaded',function(){
var oN = document.getElementById('num');
/*当input的数据改变的时候*/
oN.onchange = function(){
/*存一个key为num的数据*/
localStorage.num = this.value;
};
},false);
</script>
<body>
物品：<input type="number" name="num" id="num" min="0" max="10" step="2" value="0">
</body>
结算界面.html
<script>
document.addEventListener('DOMContentLoaded',function(){
var oP = document.getElementById('price');
/*当存储空间中数据发生变化的时候*/
window.onstorage = function(ev){
/*获取正在变化的数据*/
var n = localStorage[ev.key]*20;
oP.innerHTML = n;
};
},false);
</script>
<body>
物品总价：<strong id="price">0</strong>
</body>
网友评论