数据持久化操作和H5新特性

一、数据持久化操作

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

数据持久化操作和H5新特性

猜你喜欢