获取本地位置navigator和本地存储localstorage
2017-12-13 本文已影响0人
东东丶酱
一、地理位置
navigator.geolocation
【单次定位请求】 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
参数：
-
1、请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp) -
2、请求失败函数
失败编号 ：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了 -
3、数据收集 : json的形式
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0 -
监听信息
多次定位请求【如果位置不停在改变，就需要多次请求】 . watchPosition(像setInterval)
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
关闭更新请求 . clearWatch(像clearInterval)
eg:
navigator.geolocation.watchPosition(function(position){
box.innerHTML += '经度：'+position.coords.longitude +'<br>';
box.innerHTML += '纬度：'+position.coords.latitude +'<br>';
box.innerHTML += '准确度：'+position.coords.accuracy +'<br>';
box.innerHTML += '海拔：'+position.coords.altitude +'<br>';
box.innerHTML += '海拔准确度：'+position.coords.altitudeAcuracy +'<br>';
box.innerHTML += '行进方向：'+position.coords.heading +'<br>';
box.innerHTML += '地面速度：'+position.coords.speed +'<br>';
box.innerHTML += '时间戳：'+new Date(position.timestamp)+'<br>';
},function(err){
//alert( err.code );
navigator.geolocation.clearWatch(timer);
},{
enableHighAcuracy : true,
timeout : 6000,
maximumAge : 5000,
frequency : 1000
});
2、本地存储
Storage
- 1、sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失 - 2、localStorage
永久存储（可以手动删除数据） - 3、Storage的特点
存储量限制 ( 5M )
客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
Storage API：
- 【1】setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作 - 【2】getItem():
获取数据，通过key来获取到相应的value - 【3】removeItem():
删除数据，通过key来删除相应的value - 【4】clear():
删除全部存储的值 - 【5】存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值，如果调用clear(),key为null
newValue : 新设置的值，如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作
eg: - 浏览器关闭设置并使用
<body>
<input type="text" /><br />
<input type="radio" name='sex' value='男'/>男
<input type="radio" name='sex' value='女'/>女<br />
<textarea id='area' name="" id="" cols="30" rows="10"></textarea>
<script type="text/javascript">
var aInput = document.getElementsByTagName('input');
if ( window.localStorage.getItem('name') )
{
aInput[0].value = window.localStorage.getItem('name');
}
if ( window.localStorage.getItem('sex') )
{
for ( var i=0;i<aInput.length;i++ )
{
if ( aInput[i].value == window.localStorage.getItem('sex') )
{
aInput[i].checked = true;
}
}
}
if ( window.localStorage.getItem('text') )
{
area.value = window.localStorage.getItem('text');
}
window.onunload = function(){ //浏览器关闭时存储
if ( aInput[0].value )
{
window.localStorage.setItem('name',aInput[0].value);
}
for (var i=0;i<aInput.length;i++ )
{
if ( aInput[i].checked )
{
window.localStorage.setItem('sex',aInput[i].value);
}
}
if( area.value )
{
window.localStorage.setItem('text',area.value);
}
};
</script>
</body>
- 设置获取和删除
<body>
<input type="text" />
<input type="button" value='设置'/>
<input type="button" value='获取'/>
<input type="button" value='删除'/>
<script type="text/javascript">
var aInput = document.getElementsByTagName('input');
aInput[1].onclick = function(){
//alert( window.localStorage );
window.localStorage.setItem('name',aInput[0].value);
};
aInput[2].onclick = function(){
alert( window.localStorage.getItem('name') );
};
aInput[3].onclick = function(){
window.localStorage.removeItem('name');
};
</script>
</body>
- 监听，storage改变时触发
<body>
<input type="text" />
<input type="button" value='设置'/>
<input type="button" value='获取'/>
<input type="button" value='删除'/>
<div id="box"></div>
<script type="text/javascript">
var aInput = document.getElementsByTagName('input');
aInput[1].onclick = function(){
//alert( window.localStorage );
window.localStorage.setItem('name',aInput[0].value);
};
aInput[2].onclick = function(){
alert( window.localStorage.getItem('name') );
};
aInput[3].onclick = function(){
window.localStorage.removeItem('name');
};
window.addEventListener(
'storage',
function(e){
var e = e || event;
console.log( e.Key );
console.log( e.newValue );
console.log( e.oldValue );
console.log( e.storageArea );
console.log( e.url );
box.innerHTML += decodeURI( e.url )
}
);
</script>
</body>
