好了，总结一下HTML5提升部分的一些新增的API吧！
网络状态
- 属性：window.onLine用户当前的网络状况，返回一个布尔值。
- 事件：
- window.online用户网络连接时被调用
- window.offline用户网络断开时被调用
// 网络监听的事件
// online 在线 offline 离线
// 事件是给window绑订的
// 通过window.navigator.onLine可以返回当前的网络状态
alert(window.navigator.onLine);
var online = window.navigator.onLine;
if(online) {
alert('发起网络请求');
} else {
alert('读取本地文件');
}
// 当网络连接此事件会触发
window.addEventListener('online', function () {
alert('网络已连接');
});
// 当网络断开此事件会触发
window.addEventListener('offline', function () {
alert('网络已断开');
});
- navigator:对象包含浏览器的信息。
文件读取
- 通过FileReader对象可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。 File对象可以是来自用户在一个 <input type="file">元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer。
- 比如用户点击头像，可能一分钟内更换好几个，没必须要每次都到服务器端更改头像，占用内存多，耗用服务器资源；所以通常将刚开始切换头像的时候得到的路径是用户本地地址路径，只有在用户点击确定提交的时候才更改服务器端资源。
FileList对象
HTML5中通过为表单元素添加multiple属性实现文件多选，因此通过<input type="file">上传文件后得到的FileList对象是以伪数组形式存在。
FileReader对象
HTML5新增内建对象，用以读取本地文件。
- 属性：result文件读取的结果
- 事件：onload文件读取结束
- 方法：readAsDataURL()、readAsText()
<input type="file">
<script>
var input = document.querySelector('input');
input.onchange = function() {
var files = this.files;
// FileReader;
var reader = new FileReader;
// 传递将要读取文件对象File
reader.readAsText(files[0]);
// 通过事件监听读取完成
reader.onload = function () {
console.log(reader.result);
var style = document.createElement('style');
style.innerHTML = reader.result;
document.querySelector('head').appendChild(style);
}
}
</script>
地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)。
获取方式
通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息，如下图对不同获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。
隐私
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
方法
- 获取当前地理信息 navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
- 获取实时地理信息 navigator.geolocation.watchPosition(successCallback, errorCallback)
- 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象。
- 获取地理信息失败后，会调用errorCallback，并返回一个包含错误信息的对象。
- position.coords.latitude纬度
- position.coords.longitude经度
- position.coords.accuracy精度
- position.coords.altitude海拔高度
function success(position) {
// position是一个对象
// 此对象记录了位置信息
console.log(position);
// console.log(1);
}
function error(error) {
// error是一个对象
// 记录错误信息
console.log(error);
}
navigator.geolocation.watchPosition(success, error);
应用
在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
Web存储
- 传统方式是以document.cookie来进行存储的。
- cookie是以字符串形式存在的，这个字符串有固定格式：key=val;key=val;......在使用的时候，一般用正则表达式或者字符串方法处理这个字符串，最终得到数据。
- 要想从字符串中获取数据，需要将这个字符串处理成键值对形式，以方便我们使用。 处理方式，一般使用正则表达式。
- 也可以使用Jquery.cookie.js插件。
- $.cookie('name','xh');
- 需要在服务器中查看使用。（webstorm自带服务器，但如果是subline中需要将文件放入到有服务器的文件中使用。）
- cookie本身属于客户端的，本来可以直接获取和设置cookie，但有的浏览器或者说http协议不安全所以不让设置或获取。
- 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。
特性
- 设置、读取方法
- 容量较大
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
差异
| sessionStorage | localStorage |
|---|---|
| 生命周期为关闭浏览器窗口 | 永久生效，除非手动删除(在chrome浏览器下需要以服务器方式) |
| 在同一个窗口下数据可以共享 | 可以多窗口共享 |
| 容量约5M | 容量约20M |
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
- key(n) 以索引值来获取存储内容
$('.set').on('click', function () {
var key = $(this).parent().find('.key').val();
var val = $(this).parent().find('.val').val();
// 存储
localStorage.setItem(key, val);
});
// 读取
$('.get').on('click', function () {
var key = $(this).parent().find('.key').val();
// 读取
var val = localStorage.getItem(key);
$(this).parent().find('output').val(val);
});
// 删除
$('.remove').on('click', function () {
var key = $(this).parent().find('.key').val();
// 删除
localStorage.removeItem(key);
});
// 清空
$('.clear').on('click', function () {
// 清空
localStorage.clear();
});
Json数据
- Json是一个特定格式的字符串，用来在不同语言间传递知识。
- JSON.parse(str);可以将Json字符串转换为js可以识别的数组或对象。
- JSON.stringify(obj):把obj变成JSON字符串
奋斗吧，少年！ 如果本文有什么错误，欢迎留言指正，谢谢您！
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
