Web存储、通信、地理位置
1.Web存储
cookie存储在浏览器中，每次浏览器向服务器发送申请都须要携带cookie，个别状况下，cookie是产生于服务器端，保留于客户端，然而咱们也能够通过js来产生cookie；通常通过js-cookie这个库来操作cookie
1.Cookie //创立一个cookie,7天后过期
Cookies.set("name","this is a test cookie",{ expires: 7 })
//获取cookie
console.log(Cookie.get('name'));
//移除cookie
Cookies.remove('name')只针对于服务器,同一个服务器能够共享cookie。存储大量数据，面向服务器的 4kb2.WebStorage
sessionStorage 会话存储 选项卡
localStorage 本地存储 存到本地磁盘中，即便浏览器敞开数据仍然在。
//1. sessionStorage 会话存储特点
页面会话在浏览器关上期间始终放弃，并且从新加载或复原页面仍会放弃原来的页面会话。
关上多个雷同的URL的Tabs页面，会创立各自的sessionStorage。
敞开对应浏览器tab，会革除对应的sessionStorage。
sessionStorage 实例办法
// 设置内容
sessionStorage.setItem('name','terry');
// 获取内容
console.log(sessionStorage.getItem('name'));
// 清空内容的属性值
// sessionStorage.clear();
// 清空内容
sessionStorage.removeItem('name')
//2. localStorage 本地存储 存到本地磁盘中，即便浏览器敞开数据仍然在。
// 设置内容
localStorage.setItem('name','larry');
// 获取内容
console.log(localStorage.getItem('name'));
// 清空内容
localStorage.clear()
// 清空内容
// localStorage.removeItem('name')Web存储
Cookie 存储大量数据，面向服务器的，同一个服务器的cookie是共享的，最大4kb
WebStorage
sessionStorage 会话存储，选项卡 选项卡敞开,会话生效 --写我的项目举荐应用
localStorage 本地存储，存到本地磁盘中，即便浏览器敞开数据仍然在。2.通信
跨文档音讯传输
H5提供了网页文档之间相互接管与发送音讯的性能。当在a页面中通过window.open办法关上b页面，或者在a页面中通过iframe嵌套b页面，咱们想让a中的数据传递到b中就能够应用跨文档音讯传输
跨文档信息传输
1.通过window.open关上b页面
A1页面关上新窗口
window.onload=function(){
// 获取button按钮
var btn=document.querySelector('button');
// 获取发送数据按钮
var sendBtn=document.querySelector('#send');
// 点击btn 关上一个新窗口
var win;
btn.onclick=function(){
win=window.open('./B1.html')
}
// 点击send按钮 发送音讯给B1窗口
sendBtn.onclick=function(){
win.postMessage('hello','http://127.0.0.1:5500')
}
}
B1页面承受传递过去的音讯
window.onmessage=function(event){
// 接管到的数据
console.log(e.data);
// 数据的起源
console.log(e.origin)
}
2.通过内联框架
<script>
window.onload = function () {
var btn = document.querySelector('button');
var sendBtn = document.querySelector('#send');
var iframeBtn = document.querySelector('#iframe');
var win;
btn.onclick = function () {
// 关上新页面
win = window.open('./B1.html');
//win.postMessage('hello', '*');
console.log(win);
}
sendBtn.onclick = function () {
//发送音讯
// win.postMessage('hello', '*');
var obj = { name: 'zhangsan', age: 12 };
win.postMessage(obj, 'http://127.0.0.1:5500');
// win.postMessage('hello', 'http://127.0.0.1:5500');
// win.postMessage('hello');
}
iframeBtn.onclick = function () {
//获取b1内联窗口，应用窗口发送数据
win = document.querySelector('iframe').contentWindow;
}
}
</script>
<body>
<button>关上B1页面(获取B1窗口）</button>
<button id="send">发送数据</button>
<button id="iframe">给内联框架发送音讯（获取内联B1窗口）</button>
<!-- 内联窗口 -->
<iframe src="./B1.html" frameborder="0"></iframe>
</body>
3.websocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定。
WebSocket 使得客户端和服务器之间的数据交换变得更加简略，容许服务端被动向客户端推送数据。
应用websocket能够在服务器与客户端之间建设一个非HTTP的双向连贯，这个连贯是实时的也是永恒的，除非被显示敞开。服务器能够随时将音讯推送到客户端。
要想实现websocket连贯，须要有服务器的反对。
// WebSocket对象
var socket=new WebSocket('ws://47.93.206.13:7788/imserver/1 ');
// 承受推送音讯事件监听
socket.onmessage=function(event){
// event.data就是推送的数据
console.log(event.data)
}
// websocket和服务器连贯胜利的监听
socket.onopen=function(){
console.log('websocket和服务器连贯胜利的监听');
socket.send('这是浏览器给服务器端的数据')
}
// websocket和服务器连贯敞开连贯的监听
socket.close=function(){
console.log(' websocket和服务器连贯敞开')
}
setTimeout(socket.close,5000)订单
物流
想晓得物流到哪里了
发送申请，获取响应
能够应用轮询，间歇调用内执行申请
setInterval(function(){
ajax->
if(res.address){
告诉用户
}
},1000)
推送，工作实现后服务器推送一下，浏览器只承受，websocket实时的，长连贯geolocation
H5中增加了获取地理位置的api, window.navigator.geolocation.getCurrentPosition。它也是百度地图/高德地图通过浏览器定位的实现原理。
window.navigator.geolocation.getCurrentPosition(position=>{
console.log(position);
})
发表回复