密钥（数据存储)，CSS3 动画（animation）！

这里重点讲一下密钥（数据存储）！！！

数据存储的分类
1.LocalStorage
概念：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
2.SessionStorage
概念：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
3.Cookie
概念：储存在用户本地终端上的数据，是网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据。

三者的共同点和不同点：

<script>
共同点：
    三者都是浏览器的本地存储。
//---------------------------
不同点：
    ①存储位置：cookie是由服务器端写入的，而SessionStorage、LocalStorage都是由前端写入的；
    ②存储大小：cookie的存储空间比较小，大概4KB,而SessionStorage、LocalStorage存储空间比较大，大概5M；
    ③生命周期：cookie的生命周期是由服务器端在写入的时候就设置好的，SessionStorage是页面关闭的时候就会自动清除，LocalStorage是写入就一直存在，除非手动清除；
    ④数据共享：三者的数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。
    ⑤发送请求时是否携带：在前端给后端发送请求的时候会自动携带cookie中的数据，但是SessionStorage、LocalStorage不会；
    ⑥应用场景：cookie一般用于存储登录验证信息SessionID或者token，SessionStorage可以用来检测用户是否是刷新
    进入页面，如音乐播放器恢复播放进度条功能，多页表单信息填写，LocalStorage常用于存储不易变动的数据，减轻服务器的压力。
 </script>

三者数据存储的方式：

<script>
①localStorage：
    localStorage.setItem(key,value) ：存储数据
    localStorage.getItem(key) ：获取数据
    localStorage.removeItem(key) ：删除数据
	localStorage.clear() ：清空数据 / 删除所有数据 
	//------------------------------------------
②SessionStorage：
    sessionStorage.setItem(key, value) ：存储数据
	sessionStorage.getItem(key) ：获取数据
	sessionStorage.removeItem(key) ：删除数据
	sessionStorage.clear() ：删除所有数据 
    //-----------------------------------------
③Cookie：由服务器写入。
</script>

CSS3 动画（animation）

含义：动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果

CSS3 @keyframes 规则

1.@keyframes 规则是创建动画。
2.@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

<script>
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
        from    代表开始！
        to      代表结束
</script>