6月8日 拖拽、本地存储

拖拽 本地存储

目录

拖拽

• 可以增强用户体验
• 标签使用元素 draggable='true/false'.
• 需结合js实现强大的功能
• 触发事件
  
  • 被拖动触发的事件
    
    • ondragstart 拖拽开始
    • ondrag 拖拽中
    • ondragend 拖拽结束
  • 拖动到放置目标触发的事件
    
    • ondragenter 进入
    • ondragover 在容器中
    • ondragleave 出去
    • ondrop 放置
• 上述事件放置到元素标签中，使用js添加操作函数
• 拖动对象-dataTransfer对象函数
  
  • event/this 可以获取到触发的对象
• 悬浮的时候要设置阻止默认处理

HTML5 Web存储

• 一个比cookie更好的本地存储
• 存储本地用于浏览数据
• 安全、快速，不保存在服务器上，不影响用户体验
• 键值对存在，web网页的数据只允许该网页访问时用

存储

数据库，持久性存储数据

浏览器的内存，js的变量与函数

Cookie-客户端保存用户个人信息的文件(持久保存)。

HTML5存储

localStorage(本地存储)

其中的数据，有用户决定是否删除

sessionStorage(会话存储)

当页面关闭，数据消失

Cookie问题

• 文件最大4K
• 每个web应用最多200个Cookie文件
• 安全性低

Web存储API

两部分组成

sessionStorage + localStorage

web Workers

• 独立运行的javaScript,不影响性能