js本地儲存localStorage的跨頁面通訊
阿新 • • 發佈：2019-01-30
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>