HTML5 应用

本地存储

概念

  • 一个程序需要保存用户数据或程序数据一般是用的服务器进行保存。但在前端部分，如果我们想要保存数据，在HTML5之前可以通过cookie等技术来保存数据，但因为安全性差，以及数据保存容量很小，所以HTML5新增了本地存储可以实现在本地存储大量的 数据。
  • HTML5新增了localStorage以及sessionStorage以及配套的api来实现通过JavaScript将数据保存到本地
  • HTML5是根据保存时间的不同分为localStorage以及sessionStorage

localStorage

  1. 1. 保存数据
  2. localStorage.setItem('属性名','属性值');
  3. 2. 读取数据
  4. localStorage.getItem('属性名');
  5. 3. 删除某个数据
  6. localStorage.removeItem('属性名');
  7. 4. 删除所有数据
  8. localStorage.clear();
  10. 例子：
  11. localStorage.setItem('input','123456');
  12. var data = localStorage.getItem('input');
  13. console.log(data);输出123456
  • localstorage保存的数据有效期限是永久。即关闭浏览器后重新打开依然可以使用

sessionStorage

  • 功能上跟localstorage是完全一样
  1. 1. 保存数据
  2. sessionStorage.setItem('属性名','属性值');
  3. 2. 读取数据
  4. sessionStorage.getItem('属性名');
  5. 3. 删除某个数据
  6. sessionStorage.removeItem('属性名');
  7. 4. 删除所有数据
  8. sessionStorage.clear();
  10. 例子：
  11. sessionStorage.setItem('input','123456');
  12. var data = sessionStorage.getItem('input');
  13. console.log(data);输出123456
  • 保存的时间是当前标签也关闭时

localStorage和sessionStorage的区别

  • localstorage保存的数据是永久保存的。
  • sessionStorage保存的数据是临时数据，标签页关闭后，数据会消失
  • 无论localStorage还是sessionStorage，都只能保存字符串格式的数据

拖拽

概念

  • 是HTML5新增的特性，HTML5增强了JavaScript对于dom元素的操作，额外的提供了专属的事件以及配套的api来实现拖拽操作

实现流程

  • 谁会被拖拽

    • 给被拖拽的HTML标签设置draggable=true,让标签可以被拖拽。

  • 放置在哪个标签：作为放置标签

    • 给放置标签添加dragover事件，取消事件默认行为，以此来取消不可放置的限制

  • 放置后要完成什么操作

    • 给放置标签设置drop事件。当拖拽操作结束后会针对放置元素触发该事件
  • 实现数据在事件之间传递 ```javascript 1.在事件中保存数据 event对象名.dataTransfer.setData(“属性名”,”属性值”); 2.在另一个事件中读取数据 event对象名.dataTransfer.getData(“属性名”);//属性值

例子： document.body.addEventListener(‘dragstart’,function (e){ e.dataTransfer.setData(“class”,”item1”); });

document.body.addEventListener(‘drop’,function (e){ var className e.dataTransfer.getData(“class”); console.log(className);输出 item1 });

  4. <a name="943c54a7"></a>
  5. ### 相应api
  7. - 
  8. `draggstart`:当拖拽操作发生时，拖拽元素会触发该事件。
  10.    - 一般我们在该事件中利用`e.dataTransfer.setData`保存拖拽元素的id或class，在发生放置事件(`drop`)的标签上利用`e.dataTransfer.getData`来获取保存的数据
  11. - 
  12. `offsetX&offsetY`:获取鼠标在某个标签中的 偏移量.offsetX指的是鼠标和标签左边的距离。offsetY即鼠标和标签顶部的距离
  13. ```javascript
  14. event对象名.offsetX 或event对象名.offsetY

百度地图

概念

  • 使用百度所提供的api来完成地图的插入。

流程

  • 前往百度地图开发平台，注册账号

  • 创建应用，申请密钥

    • 在创建应用时api选择浏览器器
  • 根据官方提供的例子，将地图代码复制到自己网站中进行使用

常用百度地图实例

  • 获取某个地方的经度和纬度
  • 设置点击事件
  • 添加标注
  • 地址解析
  • 信息窗口[可选]