Web Storage是一种新的HTML5 API，与传统的cookie相比具有重要的优势。尽管该规范仍处于W3C草案状态，但所有主流浏览器都已支持它。这意味着您可以开始使用这些APIsessionStorage而且localStorage对象(我们将在后面讨论这些)并享受它们的好处。
cookie的局限性
首先是饼干。从早期开始，它们就一直是Web的巨大驱动因素。有好有坏。
例如，cookie允许我们自动登录到我们经常使用的网站，如Gmail和Facebook。另一方面，饼干，我们的搜索和浏览历史可以被追踪我们的隐私也是一个问题。cookie的另一个问题是它们有数据容量限制。
在许多web浏览器中，cookie的数据存储限制是每个cookie大约4 KB，这是基于1997年已弃用的规范，建议每个cookie至少4096字节。虽然大多数浏览器允许30到50个cookie，所以如果您超过了一个cookie的4 KB限制，您可以创建另一个cookie，但这仍然是一个真正的限制。这就是为什么开发人员通常只在cookie中存储用户和/或会话标识符，然后使用服务器端数据库来存储和获取其余的用户数据。
此外，cookie的一个经常被忽视的副作用是，它们总是随每个HTTP请求一起发送(通常甚至是图像)，导致更多的数据通过网络发送。
Web存储向前发展
Web存储接起了cookie留下的地方。Web存储的优势至少体现在两个方面。首先，web开发人员使用方便:它有一个简单的API来获取和设置键/值对(我们将在下面详细介绍)。
其次，它提供的空间量:规格默认用户代理(即web浏览器开发人员)的磁盘空间配额决定，大多数规格提供每个域不少于5或10 MB的存储空间。这意味着我们可以在客户端存储更多的基本用户/会话信息:用户首选项设置、本地化数据、用于批处理服务器写入的临时离线存储等等。
可以使用JavaScript访问存储的数据，这使您能够利用客户端脚本来完成许多传统上涉及服务器端编程和关系数据库的工作。
会话存储和本地存储
重要的是要知道有两种类型的Web存储对象:sessionStorage而且localStorage．sessionStorage仅在浏览器选项卡或窗口会话中可用。它被设计用来在单个网页会话中存储数据。
localStorage甚至在浏览器会话之间保持。这意味着当浏览器关闭和重新打开时，数据仍然可用，并且在选项卡和窗口之间也可以立即使用。在这两种情况下，Web存储数据在不同浏览器之间是不可用的。
例如，在Firefox中创建的存储对象不能在Internet Explorer中访问，就像cookie一样。
在哪里使用Web存储
实现场景的一些示例包括为在线待办事项列表存储数据(然后每隔一段时间推送到服务器，而不是实时推送)或保存用户放在购物车中的产品。数据可以在页面请求之间、多个浏览器选项卡之间以及使用的浏览器会话之间可用localStorage．你的应用可以完全离线使用localStorage．
当用户再次在线时，数据可以发送并存储在服务器端。从另一个角度来看，当一些静态数据存储在客户端上以减少后续请求的数量时，Web存储可以获得很大的性能优势。甚至图像也可以存储在字符串中使用Base64编码。
对于上面提到的例子，使用它是有意义的localStorage．那么，你可能在想，什么时候应该选择sessionStorage．在某些情况下，您只是想在窗口关闭后立即删除数据。
或者，也许你不希望应用程序干扰在另一个窗口中打开的同一个应用程序(例如，当运行Scrabble游戏的两个实例或同时运行多个单元测试时，你不希望数据发生冲突)。这些场景最适合使用sessionStorage．
使用Web存储API
这真的很简单。最好直接展示出来:
sessionStorage.setItem(“myKey”、“括号”);var myVar = sessionStorage.getItem(“myKey”);localStorage.setItem(“myKey”、“括号”);var myVar = localStorage.getItem(“myKey”);
注意用于创建的接口sessionStorage而且localStorage是相同的，并且它们是全局对象。您可以使用.setItem方法设置键及其值，然后.getItem检索特定键的值。
注意，我们只能存储字符串，这是一个很大的缺点。方法来存储和检索JSON对象的字符串表示形式JSON.stringify ()方法来存储字符串，并且JSON.parse ()从该字符串创建原始对象。
Web存储事件
当我们存储数据的时候localStorage,存储事件在其他浏览器窗口/选项卡中触发。这有什么了不起的?这个事件可以用来克服所谓的竞态条件在浏览器窗口/选项卡之间:如果用户在不同的选项卡中打开了相同的站点，此事件可用于同步数据。
(这实际上是cookie的一个大问题。)
的存储事件仅在新值与旧值不相同时触发。存储事件包含关键，oldValue而且newValue可以在代码中访问的已更改数据的属性。示例代码:
window.addEventListener (“存储”函数(事件) {console.log(' + .log的值event.key+ '由' +改变event.oldValue+ '到' +event.newValue）;},假);
对象上创建事件侦听器窗口对象的存储事件。
事件发生时，记录事件的函数关键，oldValue而且newValue到您的控制台(例如:Firebug或谷歌Chrome开发工具)执行。
浏览器支持Web存储
鼓励您从今天开始使用这个API。Web存储在IE8和所有现代浏览器中实现(即从Firefox 3.5、Safari 4、谷歌Chrome 4和Opera 10.50开始)。
的存储事件是后来添加的，但至少在Firefox 5、Safari 5、Chrome 12、Opera 10.5和IE9中都可以使用。
安全问题
请注意，使用Web Storage并不比使用cookie更安全。权力越大，责任越大。SSL在解决安全问题方面做了大量工作。
(SSL意味着客户端和服务器只通信加密的数据)。这就是为什么你看到越来越多的网站使用更安全的https协议。在任何情况下，不要在客户端存储敏感数据(如密码和信用卡号码)，也不要将此类数据发送给客户端。
最后指出
Web存储有时被称为DOM Storage这是一样的。后者源于这样一个事实，即数据实际上存储在JavaScript的窗口对象(即。window.localStorage而且window.sessionStorage）.
最后但并非最不重要的是，请记住，Web存储，就像cookie一样，可以被用户关闭。所以你总是需要实现一个后备机制以防万一window.sessionStorage或window.localStorage不可用。
进一步的阅读
- 使用HTML5存储
- 网络存储- W3C规范(编辑草案)
- Web存储浏览器兼容性
- HTML5 Web存储的本质
- 在Web应用程序中使用Web存储
