网络存储是一种相对较新的持久性方法吗数据存储在用户的计算机上(客户端)。Web存储为网站/应用程序提供了许多好处。例如，Web Storage可以用于跟踪用户跨站点/应用程序的活动，而不需要服务器端脚本和数据库。
网络存储也可以用来保留你的Web应用程序的一些功能，即使用户突然离线，给你机会提供一个无缝的体验，尽管网络连接问题。本文旨在介绍Web存储的概述和定义。
网络存储vs. cookie
在客户端存储数据的传统方法是使用HTTP cookie。Web Storage和cookie之间有许多不同之处。让我们关注客户端两种方法之间的实际差异数据存储．
存储机制
cookie是web服务器发送给浏览器的结构化数据，作为服务器对请求响应的一部分。可以通过set - cookieHTTP报头。每当任何请求发出后，浏览器将cookie作为请求头的一部分“回”给服务器。
长话短说，a必须提出申请为了更新cookie中包含的数据。此外，cookie将始终占用HTTP报头的一部分，无论数据是否已更改。另一方面，Web Storage完全是在客户端创建和管理的。
因此，在许多其他好处中，Web存储避免了Web服务器的参与。这种方法有许多有利的结果，最明显的是它在理论上可以带来更好的Web性能。相关:Web性能文章此外，由于Web存储可以在不需要HTTP请求/响应的情况下工作(除了提供Web页面的初始事务)，通过适当的实现，即使用户失去了他/她的网络连接，也可以安全地更新和修改存储在用户浏览器中的数据。
多个浏览器实例
Web Storage可以处理用户打开多个浏览器窗口/选项卡的情况。在一个浏览器窗口中存储和/或更新的数据会转移到其他浏览器窗口，只要其他浏览器窗口在同一个网站上。另一方面，cookie不是为涉及多个浏览器窗口的情况而设计的。
存储大小限制
HTTP cookie和Web Storage的大小限制/限制在不同的Web浏览器之间有所不同。但是，通常最佳实践是将cookie的大小限制在大约4.0 kB以便提供良好的跨浏览器支持。(有一个cookie测试工具，它可以让你测试浏览器的HTTP cookie大小限制。)W3C Web Storage规范不推荐默认存储大小限制，让浏览器来决定。
但是，在实践中，Web Storage完全超过了cookie的4.0 kB限制。通常认为Web Storage对象的限制是存在的5 MB。也就是说，Web存储的大小限制是+ 124527%大比饼干的多。
(还有一个Web Storage测试工具它可以让你测试浏览器的Web存储大小限制。)
网络存储类型
使用Web Storage存储客户端数据有两种方法:sessionStorage而且localStorage．
| 网络存储类型 | 存储数据的生命周期 | 数据结构 | 数据类型 |
|---|---|---|---|
sessionStorage |
会议只 | 键/值对 | 字符串 |
localStorage |
持续的 | 键/值对 | 字符串 |
sessionStorage
sessionStorage旨在仅在浏览会话期间保留客户端数据。换句话说，只有当用户在您的站点上时，数据才会被存储。sessionStorage在实际操作中，最适合用于临时数据存储。
例如，用户输入的web表单字段的值可以临时存储在sessionStorage对象为用户浏览会话的持续时间。这样，数据在整个浏览过程中都是可用的，而不需要将数据存储在服务器端数据库系统中。此外，输入数据的临时存储保护用户在不小心关闭或刷新浏览器窗口时不必重新输入数据。
localStorage
实现方式,localStorage工作方式和sessionStorage．localStorage共享相同的JavaScript方法(例如:getItem，setItem等)，它还将数据项存储为键/值对。
但是，将数据存储为localStorage对象表示数据将在用户的会话之间持久化。换句话说，用户下次访问你的网站时，这些数据就会显示出来。
Web存储浏览器支持
据Caniuse.com报道，Web Storage有很好的浏览器支持。
Web存储支持表
| 浏览器 | 版本 |
|---|---|
| Internet Explorer | IE 8及以上 |
| Mozilla Firefox | Firefox 3.5及以上 |
| 谷歌Chrome | Chrome 4及以上 |
| 苹果Safari | Safari 4及以上 |
| 歌剧 | Opera 11.5及以上 |
目前，Web存储规范是一个W3C推荐候选人．推荐分为5级，“候选人推荐”是5级中的第三级。现有的Web Storage规范相当成熟，因为它不再是一个工作草案，但同时，它仍然不是最终的。
支持没有Web存储功能的旧浏览器可以通过使用polyfill来完成。一个这样的选择，forlocalStorage的支持,是Store.js．
资料私隐及保安注意事项
Web存储区域受与cookie相同的来源限制策略的约束。这意味着一个网站的Web存储区域不能被其他网站访问。这有利于数据安全。
但它也可能会给依赖子域名的网站带来问题。在这种情况下，有一些解决方案可用，例如调用的开源包Cross-Storage由Zendesk开发。就像任何客户端数据存储机制一样，保护所存储的数据是一个重要的考虑事项。
不建议储存个人或敏感资料。其他能够访问该设备的人可能很容易读取本地数据。如果您的用户可能在共享计算环境(如大学、图书馆、工作计算机等)中访问您的站点，请特别注意数据的存储。
数据完整性也是一个问题。对于数据存储事件失败的情况，必须有防护措施。当用户禁用Web存储时，或当他/她的计算机上没有更多可用的存储空间时，或当他/她的浏览器的Web存储大小限制已经超过时，可能会发生故障。
Web Storage规范概述了存储事件失败后输出的标准化错误/警告QuotaExceededError例外。
IndexedDB呢?
在客户端数据存储方面索引数据库API(IndexedDB)提供了许多与Web存储相同的好处。但是IndexedDB并不是Web存储规范的一部分，因此它不在本指南的讨论范围之内。
然而，IndexedDB值得简单地讨论一下，因为它与Web存储实现有很多相似之处，而且可能还具有互连性。与Web存储相比，IndexedDB的数据存储稍微复杂一些。但是，它也为复杂的数据架构和关系打开了更多的机会。
使用IndexedDB，存储的数据被索引，就像您最喜欢的服务器端关系数据库管理系统(RDMS)，可能是MySQL, MSSQL, PostgreSQL等。相关:五大最佳数据库管理工具此外，还可以以类似于服务器端数据库的方式查询IndexedDB数据库，前提是实现能够处理IndexedDB数据库的查询语言。与IndexDB相比，Web Storage的数据检索功能是基础的。
Web Storage只有两个内置的方法来检索数据:.getItem而且。key．(除了长度属性，该属性可以输出一个存储区域内的条目数)。因此，对于更复杂的数据存储，您可以考虑IndexedDB而不是Web storage。
相关内容
