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>