localstorage

先看效果：

test3.gif

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button id="button">Click me.</button>
    <script>
        jQuery("#button").on('click', () => {
            window.localStorage.setItem('a', Math.random())
        })
        window.addEventListener('storage', e => {
            console.log(e)
        })
    </script>
</body>

</html>

webWorker

先看效果：

test1.gif

看代码：


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button id="button1">send</button>
    <button id="button2">get</button>
    <script>
        let worker;
        if (typeof Worker === "undefined") {
            alert('当前浏览器不支持webworker')
        } else {
            worker = new SharedWorker('work.js', 'work2');

            worker.port.onmessage = function(e) {
                console.log(`获得worker的数据:${e.data}`)
            }
        }

        jQuery('#button1').on('click', () => {
            let data = parseInt(Math.random() * 10)
            console.log(`发送数据:${data}`)
            worker.port.postMessage(data);
        })
        jQuery('#button2').on('click', () => {
            worker.port.postMessage('get');
        })
    </script>
</body>

</html>

//work.js
let data1 = '';
this.onconnect = function(e) {
    console.log('e', e);
    let port = e.ports[0];
    port.onmessage = function(e) {
        if(e.data === 'get') {
            port.postMessage(data1)
        }else {
            data1 = e.data
        }
    }
}

web-socket

先看效果：

test0.gif

客户端代码(web)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button id="button1">send</button>
    <button id="button2">get</button>
    <script>
        let ws = new WebSocket("ws://localhost:3009");

        ws.onopen = function(e) {
            console.log("Connection open ...");
            // ws.send("Hello WebSockets!");
        };

        ws.onmessage = function(e) {
            console.log(`收到数据${e.data}`);
            // ws.close();
        };

        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
        jQuery('#button1').on('click', () => {
            let data = parseInt(Math.random() * 10);
            console.log(`发送数据${data}`);
            ws.send(data)
        })
    </script>
</body>

</html>

服务端代码（koa）

const Koa = require('koa');
const serve = require('koa-static')
const path = require('path')
const Router = require('koa-router');

const websocket = require('koa-websocket')

const home = serve(path.resolve(__dirname, './'))

const app = websocket(new Koa());


let ctxs = new Set();//保证websocket唯一性
app.ws.use(function(ctx, next) {
    ctxs.add(ctx);
    ctx.websocket.on('message', function(message) {
        ctxs.forEach((item, index , arr) => {//客户端每新建一个websokcet就会保存到这个ctx中，每个ctx中的websokcet是独立的
            item.websocket.send(message)
        })
    });
    ctx.websocket.on('close', function(message) {
        ctxs.delete(ctx)
    })
    next(ctx)
} )




const router = new Router()
router.get('*', (ctx, next) => {
    ctx.body = 'hello world';
})


app.use(home)

app.use(router.routes())
    .use(router.allowedMethods());


app.listen(3009, () => {
    console.log('server is started at port 3009')
})

cookie

这个简单就不讲了

postMessage

这个其实有点限制，就是你必须拿到目标窗口的引用，否则是通信不了的，先看效果：

test4.gif

先用koa起2个服务(端口号设置不一样就行)，分别放置2个index.html.

<!--http://localhost:3009/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button id="button1">send</button>
    <button id="button2">get</button>
    <script>
        const targetWindow = window.open('http://localhost:3008/index.html'); //这步很重要，你必须拿到这个引用才行
        jQuery('#button1').on('click', () => {
            let data = parseInt(Math.random() * 10);
            console.log(`发送数据${data}`);
            targetWindow.postMessage(data, "http://localhost:3008")
        })
        window.addEventListener('message', function(e) {
            console.log(`接受到数据：${e.data}, 数据源：${e.origin}`)
        }, true)
    </script>
</body>

</html>

<!--http://localhost:3008/index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        body {
            background-color: grey;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <button id="button1">send</button>
    <button id="button2">get</button>
    <script>
        window.addEventListener('message', function(e) {
            jQuery("body").append(`<p>${e.data}</p>`)
        }, false)
    </script>
</body>

</html>