H5 地理位置与本地存储

最新推荐文章于 2024-08-08 23:45:45 发布

转载最新推荐文章于 2024-08-08 23:45:45 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/a-lonely-wolf/p/5328151.html

获取地理位置：就是获取你的维度和经度坐标，

获取的方式： IP地址和 wi-fi无线网络（PC端常用的2种） GPS定位和基站（移动端常用的2种）所以移动端比PC端精确些

一、地理位置对象

Geolocation API存在于navigator对象中，所以 navigator.geolocation: 有三个方法：

1、单次定位请求： getCurrentPosition(请求成功,请求失败,数据收集方式（json格式）); 有三个参数

　　第一个参数是用户允许浏览器共享geolocation成功后的回调方法

　　coords.latitude 维度　　coords.longitude 经度

　　第二个参数是用获取地理位置信息失败的处理方法，传入错误对象，包含code、message两个属性

　　失败编号： code

0
1	用户拒绝浏览器获取地理信息
2	尝试获取用户信息，但是失败了
3	设置了timeout的值，超时了

　　第三个参数都是geolocation选项，所有的geolocation选项都是可选的，它包含的属性如下：
　　enableHighAccuracy(Boolean型，默认为false，是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量)
　　timeout(单位为毫秒，默认值为0，在放弃并触发处理程序之前，可以等待的时间----用户选择期间是不计时的)
　　maximumAge(单位为毫秒，默认值为0。用来告诉浏览器是否使用最近缓存的位置数据，如果在maximumAge内有一个请求，将会返回它，而不请求新位置。

　　maximumAge如果为Infinity，则总是使用一个缓存的位置，如果为0则必须在每次请求时查找一个新位置)

2、多次定位请求： watchPosition(); 位置改变才会触发(像setInterval)位置改变才会成功，否则除了第一次后面的都是请求失败, 参数： frequency 更新的频率
3、关闭更新请求： clearWatch();类似clearInerval()

代码：

<head>
	<meta charset="utf-8">
	<style type="text/css">
	div{
		color: red;
	}
	</style>
	<script type="text/javascript">
	window.onload = function(){

		var btn = document.getElementById("p1");
		var show = document.getElementById("show");

		btn.onclick = function(){

			navigator.geolocation.getCurrentPosition(function(position){
				show.innerHTML += "维度： "+position.coords.latitude+"\n";
				show.innerHTML += "经度： "+position.coords.longitude+"\n";
			},function(err){
				alert(err.code);
			},{
				enableHighAccuracy : true,
				timeout : 5000
			});
		}
	}
	</script>
	
</head>
<body>
	<input type="button" id="p1" value="请求">
	<div id="show"></div>
</body>

　　目前H5 地理定位一直不成功，不知道是不是因为win10的系统，

H5 的本地存储：Storage

目前 H5 支持的是5M的文件大小，在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，

从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，

sessionStorage -- 页面关闭，存储也就没有了，数据不共享

localStorage -- 永久存储，可以手动删除数据，数据共享

Storage的特点：容量5M，客户端完成，不用请求服务器处理

Storage API ： setItem()，设置数据【key/value】键值对，都是字符串类型

　　　　　　　　getItem(),获取数据，通过key获取相应的value

　　　　　　　　removeItem(), 删除相应的value ,clear() 删除所有的信息

小例子：

<script type="text/javascript">
	window.onload = function(){

		var btn = document.getElementsByTagName("input");
		
		btn[0].onclick = function(){
			window.sessionStorage.setItem("name",btn[2].value);
		}

		btn[1].onclick = function(){
			alert(window.sessionStorage.getItem("name") );
		}
	}
	</script>
</head>
<body>
	<input type="button"  value="设置">
	<input type="button"  value="显示">
	<input type="text"  >
</body>

　　有个存储事件：

　　当数据有修改或者删除的时候，就会触发storage 事件，在对数据修改的页面上不会触发这个事件，别的共享数据的页面会触发

key		新增或者修改删除的 key值
oldValue		改变之前的值，如果key是新增的，值就是null
newValue		新设的值，可能为null
storageArea		当前的storage对象
url/uri		触发改事件的页面的url

　　　　window.addEventListener("storage",function(){　　　　},false);

例子：购物车同步：（当在一个页面上修改时，别的页面打开发现已经修改了）

<script type="text/javascript">
	window.onload = function(){

		var btn = document.getElementsByTagName("input");
		
		for (var i = 0; i < btn.length; i++) {
			btn[i].onclick = function(){
				if(this.checked){
					window.localStorage.setItem("yes",this.value);
				}else{
					window.localStorage.setItem("no",this.value);
				}
			}
		};

		window.addEventListener("storage",function(ev){
				
			if(ev.key == "yes"){
				for (var i = 0; i < btn.length; i++) {
					if(ev.newValue == btn[i].value)
					{
						btn[i].checked = true;
					}
				};
			}else if(ev.key == "no"){
				for (var i = 0; i < btn.length; i++) {
					if(ev.newValue == btn[i].value)
					{
						btn[i].checked = false;
					}
				}

			}
		},false);
	}
	</script>
</head>
<body>
	<input type="checkbox" value="苹果" />苹果<br>
	<input type="checkbox" value="梨子" />梨子<br>
	<input type="checkbox" value="香蕉" />香蕉<br>
	<input type="checkbox" value="桔子" />桔子<br>
</body>

转载于:https://www.cnblogs.com/a-lonely-wolf/p/5328151.html