Storage事件监听

一、功能

1、前台页面：访问地址index.html?rid=参数id，点击点播
2、后台管理员管理页面实时收到点播信息
简单页面：

前台页面index.html

后台页面new.html

二、实现

跨页面通信可以用localstorage实现。

1、关于localstorage

（1）写入，localStorage只支持string类型的存储

function play(){
        if(!window.localStorage){
            alert("浏览器不支持localstorage");
            return false;
        }else{
            //主逻辑业务
            localStorage.clear();
            //写入的几种形式
            localStorage.rid = '1';
            //localStorage['rid']=1;
            //localStorage.setItem('rid',1);
        }
    }

可以用谷歌自带的插件查看：

查看localStorage写入情况

（2）读取

if(!window.localStorage){
        alert("浏览器不支持localstorage");
    }else{
        alert(localStorage.rid);
        //alert(localStorage['rid']);
        //alert(localStorage.getItem('rid'));
    }

（3）storage事件监听（要在服务器下运行）

window.addEventListener("storage", function (e) {
        alert(e.newValue);
});

2、放效果图

效果图

3、最终实现代码

    
    


    这里是一部电影的简介
    点播

    
    


    

    

        

            
房间号
            
消息
        
        

            
101
            
暂无
        
        

            
102
            
暂无
        
        

            
103
            
暂无