HTML5 Web 存储（缓存）
使用HTML5可以在本地存储用户的浏览数据。
早些时候，本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.。这些数据不会被保存在服务器上，只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
客户端存储数据的两个对象为：
- localStorage ： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
- sessionStorage ： 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
提示：
键/值对通常以字符串存储，你可以按自己的需要转换该格式。
localStorage 对象：
localStorage 对象存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用。
sessionStorage 对象：
sessionStorage 方法针对一个 session 进行数据存储，当用户关闭浏览器窗口后，数据会被删除。
拓展一下：cookies sessionStorage localStorage
Cookie
Cookie 是小甜饼的意思，顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如：你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
cookie是什么?
其实cookie 是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件，它和你的网络浏览行为有关，所以存储在你电脑上的cookies就好像你的一张身份证 ，你电脑上的cookie和其他电脑上的cookie是不一样的；cookie不能被视作代码执行，也不能成为病毒，所以它对你基本无害。
cookie作用是什么？
cookie的作用主要是，当你访问了某些网页，并且对网页的一些设置进行修改，cookie就能跟踪并记录到这些修改，当你下一次访问这个网页的时候，这个网页会分析你电脑上的cookie，进而采取措施像你返回更符合你个性化的网页；当然，目前大部分广告的定位基础也是基于cookie的，比如：你此前访问了大量的健身类网站，cookie记录了你的访问行为，广告主就能够根据你的访问行为，向你推送健身类的广告。
localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill（一文搞清楚前端 polyfill） 的方案是种不错的选择。
sessionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
安全性
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
异同
cookie 数据始终在同源的http请求中携带（即使不需要），都会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
session
既然都讲了cookie，干脆就把session也一起讲了
cookie和session的区别
- 作用范围不同，Cookie 保存在客户端（浏览器），Session 保存在服务器端（保存会话信息） --> Session 弥补了 HTTP 无状态特性，服务器可以利用 Session 存储客户端在同一个会话期间的一些操作记录。
- 存取方式的不同，Cookie 只能保存 ASCII，Session 可以存任意数据类型，一般情况下我们可以在 Session 中保持一些常用变量信息，比如说 UserId 等。
- 有效期不同，Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭或者 Session 超时都会失效。
- 隐私策略不同，Cookie 存储在客户端，比较容易遭到不法获取，早期有人将用户的登录名和密码存储在 Cookie 中导致信息被窃取；Session 存储在服务端，安全性相对 Cookie 要好一些。
- 存储大小不同， 单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie。
sessionID(桥梁)
用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建创建对应的 Session ，请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器，并通过响应头的 Set-Cookie：JSESSIONID=XXXXXXX 命令，向客户端发送要求设置 Cookie 的响应，浏览器接收到服务器返回的 SessionID 信息后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名。
当用户第二次访问服务器的时候，请求会自动判断此域名下是否存在 Cookie 信息，如果存在自动将 Cookie 信息也发送给服务端（有时候也需要自己设置），服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。
注意：
微信小程序不会自动向http请求头中加入cookie，所以服务器每一次被请求都会重新和其进行连接，所以要自己设置cookie。具体见：
微信小程序项目遇见问题三：有时候undefined不一定就是undefined | 解决微信小程序每次request请求，Cookie不一样 | request 获取不到返回值
感谢：
Session、Cookie、Token 【浅谈三者之间的那点事】
其实这里还有别的：HTML5 Web SQL 数据库、HTML5 应用程序缓存（cache manifest）等，但是已经废弃，可以不用学习！感兴趣的可参考我的博客： 重学前端 HTML5 Web 存储（缓存）其他已经废弃（第八天）
HTML全局属性
HTML全局属性
accesskey（快捷键）
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。
注意
在不同操作系统中不同的浏览器中访问快捷键的方式不同：
但是，在大多浏览器中快捷键可以设置为另外一组组合。
在 HTML5 中, accesskey 属性可用于任何 HTML 元素 (它会 验证任何HTML元素，但不一定是有用)。
提示：
最好用title提示一下，不然根本不知道快捷键是什么、有没有快捷键！
class
class 属性定义了元素的类名，class 属性通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。
contenteditable（是否可编辑元素的内容）
该属性已讲，见： 重学前端 重要且实用的HTML5新语义元素（mark标记文本/progress任务进度/meter度量衡/是否可编辑内容/details补充/已移除）（第七天）
data-*（自定义数据）
data-* 属性用于存储私有页面后应用的自定义数据，data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
- 属性名不要包含大写字母，在 data- 后必须至少有一个字符
- 该属性可以是任何字符串
注意：
1、自定义属性前缀 "data-" 会被客户端忽略。
2、在JavaScript中，你可以使用dataset属性来获取HTML元素上的data- * 属性值。dataset属性会将data- * 属性名转换为驼峰命名规则。例如，data-user-id在JavaScript中会变成userId。
dir（文本方向）
dir 属性规定元素内容的文本方向，在 HTML5 中, dir 属性可用于任何的 HTML 元素 (它会验证任何HTML元素，但不一定是有用)。
类似的两个标签（bdo 和 bdi）见： 重学前端 段落的空格解析 / br和wbr / 常用的文本格式化标签 / 详解pre（white-space）/ 对比bdo和bdi / 详解a（target cursor 链接- id）（第三天）
draggable（是否可以拖动）
该属性已讲，见 重学前端 浏览器支持（添加新元素）/拖放（第八天）
hidden（隐藏）
hidden 属性规定对元素进行隐藏，隐藏的元素不会被显示。
可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等），然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
详见：CSS display(显示) 与 visibility（可见性）[第七天]
id
id 属性规定 HTML 元素的唯一的 id，id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor）；通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
锚链接 见 重学前端 段落的空格解析 / br和wbr / 常用的文本格式化标签 / 详解pre（white-space）/ 对比bdo和bdi / 详解a（target cursor 链接- id）（第三天）
lang（元素内容的语言）
lang 属性规定元素内容的语言。
资料：
重学前端 h多大 / 网页内容（html，body，head）/ element.style（第一天）
spellcheck（几乎无用，忽略）
spellcheck 属性规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查：
- 类型为 text 的 input 元素中的值（非密码）
- textarea 元素中的值
- 可编辑元素中的值
（但是菜鸟试了一下，什么卵用没有，把fire打成fier也没反应，瞎打也没反应）
style（行内样式）
style 属性规定元素的行内样式（inline style），style 属性将覆盖任何全局的样式设定，例如在 < style> 标签或在外部样式表中规定的样式。
tabindex
tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。在 HTML5 中, tabindex 属性可用于任何的 HTML 元素 (它会验证任何HTML元素，但不一定是有用)。
大家可以运行这段代码，然后直接按tab：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="//www.runoob.com//" tabindex="2"> runoob.com 菜鸟教程</a><br />
<a href="//www.google.com/" tabindex="1">Google</a><br />
<a href="//www.microsoft.com/" tabindex="3">Microsoft</a>
</body>
</html>
title（关于元素的额外信息）
title 属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。在 HTML5 中, title 属性可用于任何的 HTML 元素 (它会验证任何HTML元素，但不一定是有用)。
