本地储存：
实际开发中某些内容是不需要放到服务器中，而是放到了浏览器中，需要的时候可以快速的访问，甚至页面刷新也可能不会丢失数据，容量较大；这里介绍两种数据存储方式：sessionStorage约5M大小、localStorage约20M大小。其缺点是只能储存字符串，因此要使用JSON.stringify()编译后储存。
1.window.sessionStrage：关闭浏览器窗口为一个生命周期，在同一个页面下任何地方可以访问此数据，以键值对的方式存储数据。sessionStorage.setItem(key,value)存储数据；sessionStorage.getItem(key)获取某个键的值；sessionStorage.removeItem(key)移除某个键和值；sessionStorage.clear()清空所有的键值对，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder='输入key'>
<input type="text" placeholder='输入value'>
<input type="button" value='储存'>
<input type="button" value='删除'>
<input type="button" value='清空'>
<p></p>
</body>
<script>
var inputs = document.querySelectorAll('input');
var p = document.querySelector('p');
function getvalue() {
p.innerHTML = sessionStorage.getItem(inputs[0].value);
};
inputs[2].addEventListener('click', function() {
sessionStorage.setItem(inputs[0].value, inputs[1].value);
getvalue();
});
inputs[3].addEventListener('click', function() {
sessionStorage.removeItem(inputs[0].value);
});
inputs[4].addEventListener('click', function() {
sessionStorage.clear();
});
</script>
</html>
2.window.localStorage:生命周期永久（除非手动删除），可以在多个页面使用（同一浏览器下），以键值对形式储存，localStorage.setItem(key,value)存储数据；localStorage.getItem(key)获取某个键的值；localStorage.removeItem(key)移除某个键和值；localStorage.clear()清空所有的键值对，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" placeholder='输入key'>
<input type="text" placeholder='输入value'>
<input type="button" value='储存'>
<input type="button" value='删除'>
<input type="button" value='清空'>
<p></p>
</body>
<script>
var inputs = document.querySelectorAll('input');
var p = document.querySelector('p');
function getvalue() {
p.innerHTML = localStorage.getItem(inputs[0].value);
};
inputs[2].addEventListener('click', function() {
localStorage.setItem(inputs[0].value, inputs[1].value);
getvalue();
});
inputs[3].addEventListener('click', function() {
localStorage.removeItem(inputs[0].value);
});
inputs[4].addEventListener('click', function() {
localStorage.clear();
});
</script>
</html>
离线缓存：
在html5中可以构建一个离线应用，其方法是创建一个cache manifest文件即可。其作用是将需要无网络情况加载的资源缓存下来供离线使用，同时提升访问速度来增加用户体验，减少请求提高性能。
缓存清单：一个以.appcache为后缀名的文件，用来配置缓存资源的，其文件格式如下：
1.顶行输入： CACHE MANIFEST
2.CACHE： 此命令输入后换行配置需要缓存的静态资源，如图片，代码文件等，此命令可以省略，但是需要将资源写在CACHE MANIFEST，同时可以指定多个CACHE。
3.NETWORK： 此命令输入后换行配置需要在线访问的资源。
4.FALLBACK： 此命令输入后换行配置当缓存的文件找不到时备用的资源。
CACHE MANIFEST
#下面是配置需要缓存的资源：
CACHE:
./images/1.jpg
./images/3.jpg
./images/4.jpg
./images/5.jpg
#下面是配置需要网络才可以加载的资源：
NETWORK:
./images/1.jpg
./images/3.jpg
#下面是当资源请求失败时需要替换的资源，前面是原资源 空格 需要替换的资源
FALLBACK:
./images/1.PNG ./images/2.PNG
引入appcache文件：将appcache文件通过html标签配置到文件：
<html manifest="appcache文件的URL"></html>
调试是否配置成功：chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存；在appache文件中#表示注释，当appache文件内容发生改变或手动清除时，才会重新缓存。
geolocation地理定位：
在html5中增加了获取地理定位的API，即基于位置的服务（Location Base Service）,由于国内政策的影响，geolocation在使用的过程中会发生网络阻塞，这个是无法避免的；
geolocation是navigator导航的一个属性，若想要获取定位，那么就得通过navigator调用geolocation属性，geolocation属性下面有两个方法：getCurrentPosition()一次获取当前定位信息、watchPositionget(callback,callback)重复获取定位信息；
这两个方法都可以传相同的三个参数，前两个是回调函数作为参数，第一个回调函数表示获取定位信息成功，第二个回调函数表示获取地理位置失败，第三个参数是一个可选的对象{timeout:10000,enableHighAccuracy:false,maximumAge:0}，timeout设置请求超时时间，enableHighAccuracy浏览器获取高精度的位置，maximumAge在重复获取地理位置是允许多久重新获取一次，一般情况下都是不用考虑的。
注意：使用 watchPosition，浏览器多次调用请求成功的回调函数以便传递最新的位置。该函数返回一个watchID值，使用navigator.geolocation.clearWatch(watchId值)可以清除此次回调，使用不带参数的navigator.geolocation.clearWatch()清除所有watchPosition回调
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var altitude = position.coords.altitude;
var altitudeAccuracy = position.coords.altitudeAccuracy;
var heading = position.coords.heading;
var speed = position.coords.speed;
}, function(err) {
switch (err.code) {
case err.PERMISSION_DENIED:
alert("获取定位请求被拒绝");
break;
case err.POSITION_UNAVAILABLE:
alert("无法获取当前位置");
break;
case err.TIMEOUT:
alert("请求地理位置超时");
break;
case err.UNKNOWN_ERROR:
alert("未知错误");
break;
};
});
}
</script>
在百度地图上显示定位：
通过上面的方法只能获取到当前位置的定位，若要想在某地图上面显示，还需要对某地图进行配置，这里介绍百度地图，如：
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
var map = new BMap.Map("container");
var point = new BMap.Point(116.225350, 40.16999);
map.centerAndZoom(point, 10);
map.enableScrollWheelZoom();
var Icon = new BMap.Icon("1.png", new BMap.Size(128, 128));
var markers = new BMap.Marker(point, {
icon: Icon
});
map.addOverlay(markers);
map.addEventListener("click", function(e) {
console.log("经度坐标：" + e.point.lng + " 纬度坐标：" + e.point.lat);
});
</script>
文件读取：
通过input输入框type属性为file的input输入框可以拿到文件，此时需要通过变量接收这个文件，之后通过onchange事件触发事件处理函数，事件处理函数中国可以new FileReader()实例化一个文件对象，其方法readAsDataURL()为加载文件，括号里面传入的是文件，如下案例：
<script>
var img = document.querySelector('img');
var inputs = document.querySelector('input');
inputs.onchange = function() {
var files = new FileReader();
files.readAsDataURL(this.files[0]);
files.onload = function() {
img.src = this.result;
};
};
</script>
网络状态：
window.navigator.onLine可以返回一个布尔值表示当前网络的状态；window有两个关于网络的事件：online表示在线，offline表示离线，这两个事件监听的是网线连接或断开的状态。
<script>
console.log(window.navigator.onLine);
window.online = function() {
console.log('在线')
};
window.offline = function() {
console.log('离线')
};
</script>
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
