JS多頁面間通訊

需求：項目中做了一個音樂播放器，後面Boss說用戶同時打開了多個頁面播放音樂，這個時候每個頁面都在播放音樂，能不能只讓當前用戶操作的頁面播放音樂。

接到這個需求的時候，先去某雲音樂看了一下，用的應該是WebSocket。給領導反饋一下後，領導說後端騰不出資源配合。那隻能先排除這種方案了。

當時的思路是這樣的：

具體是：給每一個打開的要播放的網頁鏈接加一個唯一標識參數(uuid),點擊播放的時候，獲取該參數：uuid，並設置該uuid的值，作爲localStorage一個屬性的key，value爲‘play’，並且把該uuid的值，存入一個uuidArray數組裏。那麼當打開第二個頁面並且播放的時候，重複上述動作，但是在localStorage裏將該頁面的狀態設爲play,其他頁面設爲pause,每個頁面監聽storage事件，如果本頁面的狀態值爲play,則可以播放，否則，停止播放。當關閉頁面的時候，清除該localStorage裏存儲的值，並且從uuidArray數組裏刪除該項。

說的挺囉嗦，簡言之，就是監聽localStorage的storage事件，和頁面的關閉事件，去做出不同的反應。

下面是代碼，模擬該情況：

一個主頁，表示頁面會從這裏跳往A、B、C三個頁面；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>link-index</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <button class="a">JUMP TO PAGE A</button>
    <button class="b">JUMP TO PAGE B</button>
    <button class="c">JUMP TO PAGE C</button>

    <script>
       
        $('.a').on('click', function () {
            window.open('link-a.html?uuid=' + uuid(16))
        })

        $('.b').on('click', function () {
            window.open('link-b.html?uuid=' + uuid(16))
        })

        $('.c').on('click', function () {
            window.open('link-c.html?uuid=' + uuid(16))
        })

        
        function uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
                i;
            radix = radix || chars.length;

            if (len) {
                // Compact form
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
                // rfc4122, version 4 form
                var r;

                // rfc4122 requires these characters
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                uuid[14] = '4';

                // Fill in random data.  At i==19 set the high bits of clock sequence as
                // per rfc4122, sec. 4.1.5
                for (i = 0; i < 36; i++) {
                    if (!uuid[i]) {
                        r = 0 | Math.random() * 16;
                        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                    }
                }
            }

            return uuid.join('');
        }

    </script>
</body>

</html>

其中主頁的文件名爲：link-index.html

其他三個頁面的文件名爲：link-a.html, link-b.html, link-c.html,內容爲：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- title名稱可以相應的更換 -->
    <title>link-a</title> 

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <div>
        <button class="play">PLAY</button>
    </div>
    <script>
        var key = getQueryVariable('uuid')
        
        //設置uuids，以及key
        function getUuids() {
            localStorage.setItem(key, 'play')
            var val = localStorage.getItem(key)
            if (!localStorage.getItem('uuids')) { //如果不存在uuids，則構建數組，將該key push進去
                var uuidArray = []
                uuidArray.push(key)
                localStorage.setItem('uuids', JSON.stringify(uuidArray))
            } else {
             //如果存在uuids數組，並且該key值不在數組內，則添加進uuids數組裏，並重新設置localStorage裏uuids的值
                var uuidArray = localStorage.getItem('uuids');
                var arr = JSON.parse(uuidArray);
                !(arr.indexOf(key) > -1) && arr.push(key)
                localStorage.setItem('uuids', JSON.stringify(arr))
                console.log(localStorage.getItem('uuids'), 'uuids..');
            }
        }

    	//獲取url鏈接上對應參數的值
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return '';
        }
        
        //設置各個頁面的播放狀態
        function setStatus() {
            let arr = JSON.parse(localStorage.getItem('uuids')), len = arr.length;
            for(let i = 0; i < len; i ++) {
                (arr[i] == key)? localStorage.setItem(arr[i], 'play') : localStorage.setItem(arr[i], 'pause')
            }
        }
		
		//檢測到本地存儲發生變化,並且當前頁面狀態爲pause的時候，停止播放音樂
		//此時player爲播放器對象，調用其pause()方法，可停止音樂播放
        window.addEventListener('storage', function (e) {
            let val = localStorage.getItem(getQueryVariable('uuid'))
          (val == 'pause') && player.pause()
        })

        
        //點擊事件發生，播放音樂的時候
        $('.play').on('click', function(){
        	getUuids();
          	setStatus();
        })
		
		//當關閉頁面的時候，從本地存儲裏移除對應項
        window.onbeforeunload = function (event) {
            var event = event || window.event;
            var newArr = JSON.parse(uuidArray)
            var newLocalstorageArray = newArr.filter(function(item, index){
                return item != key
            })
            localStorage.setItem('uuids', JSON.stringify(newLocalstorageArray))
            localStorage.removeItem(key)
        }

    </script>
</body>

</html>

注意點：上面項目，需要在服務器環境下啓動頁面，並且保證他們是同源的。

本文只提供處理問題的一種思路：具體知識點細節可以看下面瞭解。