建设网站的结束语,饰品 东莞网站建设,如何做logo标志,58同城找工作 招聘解决方案有两种思路#xff1a;浏览器端解决方案、服务器端解决方案。
一、浏览器端解决方案#xff1a;
思路#xff1a;本地数据存储
!-- index01.html --
input idname
input typebutton idbtn value…解决方案有两种思路浏览器端解决方案、服务器端解决方案。
一、浏览器端解决方案
思路本地数据存储
!-- index01.html --
input idname
input typebutton idbtn value提交
1. localStorage
原理localStorage 在所有同源 url 中都是共享的localStorage 存储在客户端硬盘两个页面位于不同浏览器也可以共享。
注意在不同的页面修改 localStorage才能够被监听到相同页面、重复设置相同的值都是无法被监听的。
用法
// index01.html
btn.addEventListener(onclick, function () {localStorage.setItem(key, value);
});
// index02.html
window.addEventListener(storage, function (e) {console.log(e);
});
2. Cookie
原理同源可访问。
注意cookie 无法监听变化需要通过一个定时器每隔一段时间获取一次数据。
用法
// index01.html
document.cookie key value;
// index02.html
function getCookie(key) {// 从cookie中获取并解析数据return JSON.parse({\ document.cookie.replace(/;\s/gim,\,\).replace(//gim, \:\) \})[key];
}
setInterval(function(){ console.log(key getCookie(key));
}, 5000); 二、服务器端解决方案
1. websocketH5新增的协议
原理websocket建立的是全双工通讯服务器也可以主送发送数据给客户端。只要让服务器作为中转站就可以实现两个页面的通讯。
// index01.html 与服务器建立 全双工 通讯index02.html同理
const socket new WebSocket(ws://localhost:8080); // 与服务器建立全双工连接// 连接建立时触发
socket.addEventListener(open, function (event) {socket.send(Hello Server!); // 发送数据给服务器
});// 客户端接收服务端数据时触发
socket.addEventListener(message, function (event) {console.log(Message from server , event.data); // 监听服务器传回的数据
});socket.send(); // 发送数据
2. SharedWorkerH5新特性
首先新建一个worker.js不必打包到项目中直接放到服务器即可
let data ;
let onconnect function (e) {let port e.ports[0];port.onmessage function (e) {if (e.data getData) {port.postMessage(data)} else {data e.data}}
}index01.js、index02.js
const worker new SharedWorker(worker.js);// 与worker建立连接
worker.port.start();worker.port.addEventListener(message, function (e) {console.log(worker发来的数据, e.data);
}, false);setBtn.addEventListener(click, function (e) {worker.port.postMessage(value);
}, false);getBtn.addEventListener(click, function (e) {// 获取发送到worker的数据约定 getData 是获取数据。worker.port.postMessage(getData);
}, false);
