如何實現瀏覽器內多個標籤頁之間的通訊?
阿新 • • 發佈:2019-01-09
本題主要考察資料儲存的知識,資料儲存有本地和伺服器儲存兩種方式。這裡主要講解用本地儲存方式解決。即呼叫
localStorage、Cookie
等本地儲存方式。
第一種——呼叫localStorage
在一個標籤頁裡面使用
localStorage.setItem(key,value)
新增(修改、刪除)內容;
在另一個標籤頁裡面監聽storage
事件。
即可得到localstorge
儲存的值,實現不同標籤頁之間的通訊。
標籤頁1:
<input id="name">
<input type="button" id="btn" value ="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
localStorage.setItem("name", name);
});
});
</script>
標籤頁2:
<script type="text/javascript">
$(function (){
window.addEventListener("storage", function(event){
console.log(event.key + "=" + event.newValue);
});
});
</script>
第二種——呼叫cookie+setInterval()
將要傳遞的資訊儲存在cookie中,每隔一定時間讀取cookie資訊,即可隨時獲取要傳遞的資訊。
頁面1:
<input id="name">
<input type="button" id="btn" value="提交">
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var name=$("#name").val();
document.cookie="name="+name;
});
});
</script>
頁面2:
<script type="text/javascript">
$(function(){
function getCookie(key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){
console.log("name=" + getCookie("name"));
}, 10000);
});
</script>