舉了例子:
我同時打開了a和b兩個頁面,我聚焦在a上,並進行一些操作,讓a頁面上的js處理我的操作並將資料發送到旁邊的b頁面。此時b頁面就能在不刷新、不經過伺服器的情況下接收這些資料並作出回饋。類似於在百度音樂pc網頁版聽歌的時候,如果已經打開了百度音樂盒頁面和列表頁,我在列表頁點一首歌曲的“播放”按鈕時,旁邊的音樂盒頁面就可以自動開始播放那首音樂,而不需要開啟新頁面。
總覺得用cookie什麼的幹這事有些雞肋。
人生最曼妙的风景,竟是内心的淡定与从容!
這是一道阿里的面試題,方法很多。利用localstorage的storage事件可以通訊;shadredworker也可以解決;還有就是用websocket。
如果你能控制ab的頁面甚至決定URL: sharedworker / localstorage / sessionstorage 都可以用
<ul> <li><a href="/song-1" target="player">song-1</a></li> <li><a href="/song-2" target="player">song-2</a></li> <li><a href="/song-3" target="player">song-3</a></li> </ul>
屬性target="framename"表示在指定的框架(頁面)中開啟連結.可以實現:點擊新增商品到購物車時,如果購物車頁面已經開啟,則只刷新該頁面,而不是開啟新的購物車頁面.點擊播放歌曲時,如果播放器頁面已經打開,則只刷新該頁面,而不是打開新的播放器頁面.
提示下思路:瀏覽器同時打開兩個同網域的網頁,他們的localStorage是共享的,不仅如此,他们之间的localStorage值改变也是可以监听的。同域的a和b两个页面,a页面发生localStorage.set('abc', 123),b頁可以透過以下方式監聽變化:
localStorage
localStorage.set('abc', 123)
window.addEventListener("storage", function(e){ console.log('key:', e.key); // "abc" console.log('oldValue:', e.oldValue); // null console.log('newValue:', e.newValue); // 123 });
這是一道阿里的面試題,方法很多。利用localstorage的storage事件可以通訊;shadredworker也可以解決;還有就是用websocket。
如果你能控制ab的頁面甚至決定URL: sharedworker / localstorage / sessionstorage 都可以用
屬性target="framename"表示在指定的框架(頁面)中開啟連結.
可以實現:
點擊新增商品到購物車時,如果購物車頁面已經開啟,則只刷新該頁面,而不是開啟新的購物車頁面.
點擊播放歌曲時,如果播放器頁面已經打開,則只刷新該頁面,而不是打開新的播放器頁面.
提示下思路:
瀏覽器同時打開兩個同網域的網頁,他們的
localStorage
是共享的,不仅如此,他们之间的localStorage
值改变也是可以监听的。同域的a和b两个页面,a页面发生localStorage.set('abc', 123)
,b頁可以透過以下方式監聽變化: