1. 程式人生 > >js本地儲存localStorage的跨頁面通訊

js本地儲存localStorage的跨頁面通訊

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>