HTML5和css3的总结三

时间:2022-12-08 07:04:17

继续总结H5的新东西

1》序列化与反序列化
序列化:其实就是一个json-》string的过程
JSON.stringify(json);
反序列化:string-》json的过程(注意,此处需要标准的json模式)
JSON.parse(string);

简单的比较一下eval和parse的区别
安全性 数据 兼容性
eval 不安全 任何数据 全兼容
parse 安全 标准json 兼容IE8+

2》localStorage

定义:localStorage.name='值';或者 localStorage.setItem('name','值');
相同的方法还有 getItem removeItem clear

cookie和localStorage的对比
大小 有效期 环境配置 兼容性
cookie 4k session(会话结束) 走网络 全兼容
localStorage 5M 不过期 不走网络 不兼容IE6

事件:onstorage 包含事件对象ev.key(存储的名字) loacalStorage[ev.key](名字对应的值)

应用:购物车页面和支付页面的实时关联
思路:购物车页面定义一个localStorage.name='';
支付页面使用window.onstorage事件获取ev.key和对应localStorage[ev.key]值来实时计算总价格(当然可以传输json形式的数据添加数量和运费等详细信息)

3》H5拖拽上传文件

事件:ondragenter ondragover ondragleave ondrop(当拖拽松手时)

上传文件可以配合setTimeout使用 在ondragover中因为不停的触动事件,事件中不停的清除上一个定时器来控制上传区域的显示和隐藏,注意事件冒泡的处理

读取上传文件
事件 ondrop 中的事件对象 ev.dataTransfer.files[0];
事件对象中包含 lastModifiedData 最后修改的日期
name
size
type等等
H5中读取文件的新功能 fileReader(object)
定义:var reader=new FileReader();

读取一个文本 reader.readAsText('要读取的数据','编码');
读取一个图片 reader.readAsDataURL('要读取的数据','base64');

事件: onload 当文件读取成功
onerror 当文件读取失败
onloadstart 当文件开始读取
onloadend 当文件读取结束
onabort 当文件读取中断
onprogress 当文件加载进行 包含事件对象 ev.loaded已加载 ev.total总加载量 ———》制作加载进度条