Web存储API提供了一种机制，通过这种机制，浏览器可以以比使用cookie更直观的方式安全地存储键/值对。在Web存储API扩展了Window两个新的属性对象- Window.sessionStorage和Window.localStorage。—调用其中之一将创建Storage对象的实例，通过该实例可以设置，检索和删除数据项。sessionStorage和localStorage的每个原始（域）使用不同的存储对象。
存储对象是简单的键值存储，类似于对象，但是它们在页面加载时保持完整。
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
键和值始终是字符串。要存储任何类型convert it to String，然后再存储它。始终建议使用Storage interface方法。
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));
Web存储中的两种机制如下：
存储 « 本地存储将数据写入磁盘，而会话存储仅将数据写入内存。应用退出时，将清除写入会话存储的所有数据。
每个浏览器可用的最大存储量有所不同，但是大多数浏览器已实现w3c建议的至少5MB的最大存储限制。
+----------------+--------+---------+-----------+--------+
| | Chrome | Firefox | Safari | IE |
+----------------+--------+---------+-----------+--------+
| LocalStorage | 10MB | 10MB | 5MB | 10MB |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB | 10MB | Unlimited | 10MB |
+----------------+--------+---------+-----------+--------+
始终捕获LocalStorage安全性和超出配额的错误
StorageEvent «当存储区域更改时，将在文档的Window对象上触发存储事件。当用户代理要发送文档的存储通知时，该用户代理必须使用StorageEvent在文档对象的Window对象上排队执行一个任务，以激发一个名为storage的事件。
注意：有关真实示例，请参阅Web Storage Demo。查看源代码
监听dom / Window上的存储事件以捕获存储中的更改。摆弄。
Cookies（网络cookie，浏览器cookie）Cookies是数据，以名称-值对形式存储在计算机上的小文本文件中。
使用Document.cookie的 JavaScript访问
也可以使用Document.cookie属性通过JavaScript创建新的cookie，并且如果未设置HttpOnly标志，那么也可以从JavaScript访问现有的cookie。
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"
安全和HttpOnly cookie HTTP状态管理机制
Cookies通常在Web应用程序中用于标识用户及其经过身份验证的会话
当接收到HTTP请求时，服务器可以发送带有响应的Set-Cookie标头。Cookie通常由浏览器存储，然后将Cookie与在HTTP HTTP标头内向同一服务器发出的请求一起发送。
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
客户端关闭时，会话cookie将被删除。他们没有指定Expires或Max-Age指令。
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
永久性Cookie会在特定日期（Expires）或特定时间长度（Max-Age）之后过期。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Cookie HTTP请求标头包含先前由服务器通过Set-Cookie标头发送的存储的HTTP cookie。仅HTTP的cookie不能通过JavaScript通过Document.cookie属性，XMLHttpRequest和Request API进行访问，以减轻针对跨站点脚本（XSS）的攻击。
Cookies主要用于三个目的：
- 会话管理 «登录名，购物车，游戏得分或服务器应记住的其他任何内容
- 个性化 «用户首选项，主题和其他设置
- 跟踪（记录和分析用户行为）«Cookies具有与之关联的域。如果此域与您所在页面的域相同，则该cookie被称为第一方cookie。如果域不同，则称其为第三方cookie。虽然第一方Cookie仅发送给设置它们的服务器，但网页可能包含图像或其他域中存储在服务器上的其他组件（例如广告横幅）。通过这些第三方组件发送的Cookie被称为第三方Cookie，主要用于在网络上进行广告和跟踪。
发明了Cookies来解决“如何记住有关用户的信息”的问题：
- 当用户访问网页时，其名称可以存储在cookie中。
- 下次用户访问该页面时，属于该页面的cookie将添加到请求中。这样，服务器将获得必要的数据以“记住”有关用户的信息。
GitHubGist 示例
作为总结，
- localStorage会保留在不同的选项卡或窗口中，即使我们关闭浏览器，也会相应地使用域安全策略和用户对配额限制的选择。
- 如果关闭选项卡（顶级浏览上下文），则sessionStorage对象不会持久，因为如果通过另一个选项卡或窗口浏览，则该对象将不存在。
- Web存储（会话，本地）允许我们保存大量的键/值对和大量文本，而这是无法通过Cookie进行的。
- 用于敏感操作的Cookie的寿命应仅较短。
- Cookies主要用于在网络上进行广告和跟踪。例如，请参阅Google使用的Cookie的类型。
- Cookie随每个请求一起发送，因此它们可能会降低性能（尤其是对于移动数据连接而言）。用于客户端存储的现代API是Web存储API（localStorage和sessionStorage）和IndexedDB。
