一、数据持久化操作 cookie
描述:也叫数据本地化,是一种将数据长久的保存在客户端的技术操作
作用:由于cookie是存储在客户端本地的,因此可以作为必要信息的容器
语法:cookie的设置方案有两种 分为前端和后端
前端:写入:document.cookie=‘key=value;expires=过期时间’;
var expires=new Date(new Date().getTime()+10*1000).toGMTString();
document.cookie='username=yangjie;expires='+expires;
读取:console.log(document.cookie);
删除:document.cookie='key=value;expires=当前时间+1';
var expires=new Date(new Date().getTime()).toGMTString();
document.cookie='username=yangjie;expires='expires+1;
后端:后端为前端添加cookie(谁访问php 谁就添加cookie)
设置cookie:setcookie('key','value','expires','path','domain')
读取cookie:使用$_COOKIE对象直接获取cookie
删除cookie:setcookie('key','value','expires','path','domain')
二、localStorage 和 sessionStorage
区别:localStorage中存储的数据,只要不被用户主动删除就会永远保存
sessionStorage中存储的数据,只要用户不关闭页面,就一直存在,直到关闭为止
说明:获取两者不存在的key值,返回null
语法:
***.setItem('key','value');
***.getItem('key');
***.removeItem('key');
三、webworker
描述:一种能够在后台处理执行js脚本的html5技巧,能够使脚本的运行变得悄无声息,不影响页面的运作,类似异步
语法:1、在页面中的部分
var worker = new Worker('想要执行的js文件路径');
worker.onmessage=function(eve){ console.log(eve.data) };
2、在js中的部分
postMessage(回传信息)
四、FileReader
描述:html5中提供的用来对input文件上传操作进行处理的对象,该对象中提供的方法能够对上传文件的内容进行预先读写
在某些情况下,可以达到‘预览’的效果
说明:读写方式:文本读取,图片读取,二进制读取
语法:var fileReader=new FileReader();
文本读取:
fileReader.readAsText(从input中获取的文件流)
fileReader.onload=function(){
console.log(fileReader.result);
}
图片读取:
fileReader.readAsDataURL(从input中获取的文件流)
fileReader.onload=function(){
console.log(fileReader.result);
}
五、物理定位geoLocation
描述:html5为了对设备提供更好的实时位置服务,开放了coordinate定位,用户可以通过navigator.geolocation来使用,因 为定位服务涉及用户隐私,所以必须在设置了https的服务器上才能正确加载
六、获取设备getUserMedia
描述:html5为了能够更容易地获取用户的设备,以便提供信息采集,在navigator对象中提供一个getUserMedia的方法,本方 法用来获取用户的多媒体设备
说明:获取设备一般和canvas标签配合使用,以便达到“实时采集”
语法:1、兼容性
navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGeUserMedia;
2获取设备
navigator.getUserMieda({获取设别类型的JSON格式},func获取多媒体流文件,func错误回调)
七、小补充
在自定义的js外部脚本中,尽量使用IIFE,保证不对全局产生影响
在自执行函数执行之前,添加;保证脚本正常加载