一、数据持久化操作
1)cookie
描述:数据持久化操作也叫数据本地化,是一种将数据“长久”保存在客户端的操作
cookie可以看做是一个存储容器
语法:cookie的设置方案(两种):
前端设置cookie:
写入cookie:document.cookie = 'key=value;expires=过期时间戳';
读取cookie:console.log(document.cookie);
删除cookie:document.cookie = 'key=value;expires=当前时间戳+1';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie/title>
</head>
<body>
<script>
var expires = new Date(new Date().getTime()+10*1000).toGMTString();
var temeValue = escape('Dreamy');
document.cookie = 'userName'+temeValue+';expires='+expires;
</script>
</body>
</html>
后端设置cookie:
设置cookie
setcookie('key','value','expires','path','domain');
setcookie('username','frank',time()+10);
读取cookie
使用$_COOKIE对象直接获取cookie
删除cookie
setcookie('key','value','expires','path','domain');
setcookie('username','',time()-1);
<!DOCTYPE html>
<html>
<head lang='en'>
<meta charset='utf-8'/>
<title>后端操作cookie</title>
</head>
<body>
<button>点我加cookie</button>
<script>
document.querySelector('button').onclick = function (){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText);
}
}
};
xhr.open('get', 'after end.php', true);
xhr.send();
};
</script>
</body>
</html>
<?php
setcookie('username','frank',time()+1000,'/','127.0.0.1');
?>
简单加密与解密:
escape(),escape()
2)localStorange
其储存的数据,只要用户不主动删除就一直存在
3)sessionstorage
只要用户不关闭页面,就一直在
对于两者而言,若获取不存在的key值,返回nall
二、webworker
描述:在后台处理执行js脚本
语法:
1)页面中的部分:
<script>
var worker = new worker('');
worker.onmessage = function(eve){
console.log(eve.data);
};
</script>
2)在js中的部分:
在js文件中,任何位置都可以通过postmessage,来通知页面中的webworker
三、filereader
描述:用来对input中文件上传操作进行处理的对象(预览)
说明:文件读写方式有三种:
文本读取 图片读取 二进制读取
语法:
var fileReader = new FileReader();
fileReader.readAsText(fileInput.files[0]);
fileReader.onload = function (){
showDiv.innerHTML = fileReader.result;
var fileReader = new FileReader();
fileReader.readAsDataURL(fileInput.files[0]);
fileReader.onload = function (){
img.setAttribute('src', fileReader.result);
获取文件获取的是文件,图片则是图片路径
四 、coordinate
五、usermedia
描述:
获取设备getmessage
HTML5为了能更容易获取用户设备,以便提供信息采集,在navigator中getusermessage
说明:获取设备一般和canvas标签配合使用,实时采集
语法:
1)兼容性
1 检查浏览器是否支持getUserMedia方法
navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia
2 )getUserMedia方法接受三个参数
getUserMedia(streams, success, error)
streams:表示包括哪些多媒体设备的对象
success:回调函数,获取多媒体设备成功时调用
error:回调函数,获取多媒体设备失败时调用r