开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情
一、H5 的浏览器存储有哪些
浏览器存储
浏览器存储主要包括：cookie；localStorage；sessionStorage；indexDB； websql； window 变量； flash cookie
1、cookie
这个存储用了很久了，而且也是以前大多网站十分喜欢的存储站点。但是也很容易被清除。同时 cookie 会在每一次通信过程中传向服务端。同时 cookie 有一个很好的地方就是，它本身有一个过期时间属性，可以用来标注一个变量的有效期。而 cookie 一旦过期就会被自动删除掉。
2、localStorage、sessionStorage
localStorage: 持久存储，只要用户不主动删除就会一直存在。
sessionStorage：面向 session 的浏览器存储，因此只存在于一个页面的生命周期内，关闭即清除两者均采用键值对的形式存储数据
3、indexedDB
内嵌在浏览器端的非关系型数据库，数据以键值对的形式存储，兼容性良好。indexDB 直接操作的存储对象是 ObjectStore，这有点类似其他数据库中 table 概念。
4、websql
内嵌在浏览器的关系型数据库，前端可以像在使用 mysql、Oracle 一样的写 sql 语句，并存储信息。兼容性良好。存储后可在浏览器 resource 中查看。
5、window 变量
生命周期有限，一般大家也不会去使用。但是对于全局变量的临时存储来说，还是一个不可多得的好地方。
6、flash cookie
flash cookie 现在用的地方比较多。
二、简述 transform，transition，animation 的作用
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。transition 和 animation 两者都能实现动画效果transform 常常配合 transition 和 animation 使用
2、transition 样式过渡，从一种效果逐渐改变为另一种效果
transition 是一个合写属性
transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是：css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
transition 通常和 hover 等事件配合使用，需要由事件来触发过渡
3、animation 动画 由@keyframes 来描述每一帧的样式
区别：
（1）transform 仅描述元素的静态样式，常常配合 transition 和 animation 使用
（2）transition 通常和 hover 等事件配合使用，animation 是自发的，立即播放
（3）animation 可设置循环次数
（4）animation 可设置每一帧的样式和时间，transition 只能设置头尾
（5）transition 可与 js 配合使用，js 设定要变化的样式，transition 负责动画效果。
