数据持久化操作和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

             

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭