h5c3新特性浏览器存储

H5 C3新特性

HTML5新特性：

1. 托拽释放：拖拽是一种常见的特性，即抓取对象拖到另一个位置，在HTML5中

1. 自定义属性data-d

1. 语义化更好的标签（header,nav,aside,article,section）

1. 音视频若浏览器不支持播放，可在标签中添加autoplay

1. 画布cavans

1. 地理（Geolaction）

1. 本地离线存储（localstorage），长期存储数据，浏览器关闭后数据不丢失

1. sessionstorage 在浏览器关闭后，数据自动删除

1. 表单控件：calendar,date,time,url,search,tel,file,number

1. 新的技术：webworker,websocket,Gelocation

CSS3新特性：

1. 颜色：新增rgba,hsla模式

1. 文字阴影：（text-shadow）

1. 边框圆角：border-radius 边框阴影： （box-shadow）

1. 盒子模型：box-sizing

1. 背景：background-size,background-origin,background-clip(削弱)

1. 渐变：linear-gradient(线性渐变)

1. 过渡：transition 可实现动画

1. 自定义动画：animate@keyform

1. 媒体查询：多栏布局

1. border-image

1. 2D转换，3D转换

1. 字体图标 弹性布局

localstorage,sessionstorage,cookie 区别：

相同之处：

这三者都是浏览器存储数据的方式

不同之处：

生命周期：

cookie：可以设置失效时间，不设置默认关闭浏览器后失效

localstorage：除非手动删除，否则永久保存

sessionstorage：只在浏览器会话下有效，关闭浏览器或页面即清除

存放数据大小：

cookie：4KB左右

localstorage,sessionstorage：可以保存5MB的数据

http请求：

cookie：每次都会携带在HTTP请求头中，如果使用cookie保存过多数据，将带来性能问题

localstorage,sessionstorage：只保存在浏览器中，并不参与服务器的通信

易用性：

需要程序员自己封装，原生的cookie接口不友好

localstorage,sessionstorage：原生接口可以接受，也可二次封装，这样对object和array有更好的支持