zoukankan      html  css  js  c++  java
  • HTML5和css3的总结三

    继续总结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总加载量 ———》制作加载进度条


  • 相关阅读:
    尚硅谷Docker笔记(6) DockerFile解析
    注意防踩坑系列
    尚硅谷Docker笔记(1) Docker简介
    尚硅谷Docker笔记(4) Docker 镜像
    尚硅谷Docker笔记(8) 本地镜像发布到阿里云
    尚硅谷Docker笔记(2) Docker安装
    SQL中join连接查询时条件放在on后与where后的区别
    尚硅谷Docker笔记(3) Docker常用命令
    尚硅谷Docker笔记(7) Docker常用软件安装
    关于存储过程的几个sql
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/5979359.html
Copyright © 2011-2022 走看看