一、功能
1、前臺(tái)頁(yè)面：訪問(wèn)地址index.html?rid=參數(shù)id，點(diǎn)擊點(diǎn)播
2、后臺(tái)管理員管理頁(yè)面實(shí)時(shí)收到點(diǎn)播信息
簡(jiǎn)單頁(yè)面：
前臺(tái)頁(yè)面index.html
后臺(tái)頁(yè)面new.html
二、實(shí)現(xiàn)
跨頁(yè)面通信可以用localstorage實(shí)現(xiàn)。
1、關(guān)于localstorage
（1）寫(xiě)入，localStorage只支持string類(lèi)型的存儲(chǔ)
function play(){
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
return false;
}else{
//主邏輯業(yè)務(wù)
localStorage.clear();
//寫(xiě)入的幾種形式
localStorage.rid = '1';
//localStorage['rid']=1;
//localStorage.setItem('rid',1);
}
}
可以用谷歌自帶的插件查看：
查看localStorage寫(xiě)入情況
（2）讀取
if(!window.localStorage){
alert("瀏覽器不支持localstorage");
}else{
alert(localStorage.rid);
//alert(localStorage['rid']);
//alert(localStorage.getItem('rid'));
}
（3）storage事件監(jiān)聽(tīng)（要在服務(wù)器下運(yùn)行）
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
2、放效果圖
效果圖
3、最終實(shí)現(xiàn)代碼
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
這里是一部電影的簡(jiǎn)介
<button id="play">點(diǎn)播</button>
</body>
<script type="text/javascript">
//讀取當(dāng)前url參數(shù)
function getQueryString(name){
var reg=new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r=window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
// 探測(cè)瀏覽器是否支持localStorage
var isSupportLocalStorage = function() {
try {
return 'localStorage' in window && window['localStorage'] != null;
} catch (e) {
return false;
}
};
var addEvent = (function() {
if(document.addEventListener) {
return function(el, type, fn) {
if(el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for(var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function(el, type, fn) {
if(el && el.nodeName || el === window) {
el.attachEvent('on' + type, function() {
return fn.call(el, window.event);
});
} else if (el && el.length) {
for(var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var play=document.getElementById('play');
if(isSupportLocalStorage()) {
// 清除所有存儲(chǔ)的key,value值
localStorage.clear();
var playBtn = document.getElementById('play');
addEvent(playBtn, 'click', function () {
// 按下按鈕存下當(dāng)前輸入框中的值
localStorage.setItem('rid', getQueryString('rid'));
});
// 存儲(chǔ)數(shù)字
//localStorage.setItem('number', 1);
// 存儲(chǔ)對(duì)象 因?yàn)閘ocalStorage最終都是以String來(lái)存儲(chǔ)的 所以如果要存儲(chǔ)對(duì)象 可以覆寫(xiě)它的toString方法
// 按照你想要的字符串格式來(lái)存儲(chǔ), 然后取出后再做相應(yīng)的處理, 這里就拿json格式做個(gè)例子
//localStorage.setItem('obj', "{'name':'Andrew', 'job': 'Developer'}");
// 常規(guī)的存儲(chǔ)
//localStorage.setItem('string', 'hello world');
} else {
// 這里可以做些降級(jí)的方案, 當(dāng)然也可以給出一個(gè)不支持的提示
var span = document.createElement("span");
span.style.color = 'red';
span.innerHTML = 'oops, your browser dones\'t support localStorage yet. :(';
document.getElementsByTagName('body')[0].appendChild(span);
}
</script>
</html>
<!-- new.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這是新的頁(yè)面</title>
</head>
<body>
<p id="p"></p>
<table border="1px">
<tr>
<td>房間號(hào)</td>
<td>消息</td>
</tr>
<tr id="101">
<td name="rid">101</td>
<td name="msg">暫無(wú)</td>
</tr>
<tr id="102">
<td name="rid">102</td>
<td name="msg">暫無(wú)</td>
</tr>
<tr id="103">
<td name="rid">103</td>
<td name="msg">暫無(wú)</td>
</tr>
</table>
</body>
<script type="text/javascript">
// 探測(cè)瀏覽器是否支持localStorage
var isSupportLocalStorage = function() {
try {
return 'localStorage' in window && window['localStorage'] != null;
} catch (e) {
return false;
}
};
var addEvent = (function() {
if(document.addEventListener) {
return function(el, type, fn) {
if(el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for(var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function(el, type, fn) {
if(el && el.nodeName || el === window) {
el.attachEvent('on' + type, function() {
return fn.call(el, window.event);
});
} else if (el && el.length) {
for(var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
if(isSupportLocalStorage()) {
// 給window監(jiān)聽(tīng)storage事件
addEvent(window, 'storage', function (event) {
// 查看event對(duì)象內(nèi)容
// console.dir(event);
// 可以輸出oldValue和newValue觀察
changeMsg(event.newValue);
console.log('key: %s, old value: %s, new value: %s', event.key, event.oldValue, event.newValue);
});
// 取出來(lái)也是String類(lèi)型的, 要用parseInt轉(zhuǎn)換下
//console.log(parseInt(localStorage.getItem('number')));
// 取出來(lái)的json格式字符串要用eval解析一下 轉(zhuǎn)換成對(duì)象
//console.dir(eval('(' + localStorage.getItem('obj') + ")"));
// 普通的讀取
//console.log(localStorage.getItem('string'));
} else {
var span = document.createElement("span");
span.style.color = 'red';
span.innerHTML = 'oops, your browser dones\'t support localStorage yet. :(';
document.getElementsByTagName('body')[0].appendChild(span);
}
function changeMsg(rid){
var obj=document.getElementById(rid);
obj.cells[1].innerHTML='有人點(diǎn)播了哦';
}
</script>
</html>
