localStorage，sessionStorage，session和cookies有什么区别？
localStorage，sessionStorage，session和cookies的技术优点和缺点是什么？我什么时候可以使用它们？
这是一个非常广泛的范围问题，而且很多利弊将会与情况相关。
在所有情况下，这些存储机制将特定于个人计算机/设备上的个别浏览器。 在会话中持续存储数据的任何要求都需要涉及应用程序服务器端 – 很可能使用数据库，但可能使用XML或文本/ CSV文件。
localStorage，sessionStorage和cookies都是客户端存储解决scheme。 会话数据保存在直接控制的服务器上。
localStorage和sessionStorage
localStorage和sessionStorage是相对较新的API（意味着不是所有的传统浏览器都支持它们），并且除了持久性之外几乎是完全相同的（都在API和function上）。 sessionStorage（顾名思义）仅适用于浏览器会话的持续时间（当标签或窗口closures时会被删除） – 然而，页面重新加载（源DOM存储指南 – Mozilla开发者networking ）仍然存在。
很显然，如果您正在存储的数据需要持续使用，那么localStorage比sessionStorage更可取 – 尽pipe您应该注意到两者都可以被用户清除，所以在这两种情况下都不应该依赖数据的持续存在。
localStorage和sessionStorage非常适合在页面间保持客户端脚本所需的非敏感数据（例如：偏好，游戏中的分数）。 存储在localStorage和sessionStorage中的数据可以很容易地从客户端/浏览器中读取或更改，因此不应该依赖于在应用程序中存储敏感或安全相关的数据。
cookies
cookies也是如此，用户可以轻易地篡改数据，也可以以纯文本方式从数据中读取数据 – 所以如果您想存储敏感数据，那么会话是您唯一的select。 如果您不使用SSL，cookie信息也可以在传输过程中截取，特别是在开放的wifi上。
从积极的一面来看，Cookie可以通过设置一个仅限于HTTP的标志来实现跨站脚本（XSS）/脚本注入等安全风险，这意味着现代（支持）浏览器将阻止访问来自JavaScript的cookie和值这也将阻止你自己的，合法的JavaScript访问它们）。 这对于用于存储包含login用户详细信息的令牌的validationcookie特别重要 – 如果您拥有该cookie的副本，那么就所有意图和目的而言，只要Web应用程序是有关的，并且对用户具有的数据和function具有相同的访问权限。
由于cookie用于authentication目的和用户数据的持久性，因此对于页面有效的所有 cookie都会从浏览器发送到服务器，以获得对同一域的每个请求 – 这包括原始页面请求，任何后续Ajax请求，所有图像，样式表，脚本和字体。 由于这个原因，Cookie不应该被用来存储大量的信息。 浏览器也可能限制可以存储在cookie中的信息的大小。 Cookie通常用于存储用于身份validation，会话和广告跟踪的标识令牌。 令牌通常不是人类可读的信息本身，而是encryption的标识符链接到您的应用程序或数据库。
localStorage vs. sessionStorage vs. Cookies
在function方面，cookies，sessionStorage和localStorage只允许你存储string – 在设置的时候可以隐式地转换原始值（在读取之后需要将它们转换回来作为它们的types），而不是Object或Arrays（有可能JSON将它们串行化，以使用API存储它们）。 会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象。
客户端与服务器端
由于HTTP是一种无状态协议，Web应用程序无法在返回到Web站点时识别以前访问过的用户 – 会话数据通常依靠cookie标记来识别用户重复访问（尽pipe很less使用URL参数相同的目的）。 数据通常会有一个滑动到期时间（每次用户访问时都会更新），并且根据您的服务器/框架数据将被存储在进程中（意味着如果Web服务器崩溃或重新启动，数据将丢失），或者在外部一个状态服务器或数据库。 当使用networking农场（给定网站有多个服务器）时，这也是必要的。
由于会话数据完全由您的应用程序（服务器端）控制，因此它是本质上任何敏感或安全的最佳位置。
服务器端数据的明显缺点是可扩展性 – 在会话期间每个用户都需要服务器资源，并且每个请求都必须发送任何需要客户端的数据。 由于服务器无法知道用户是否导航到其他站点或closures浏览器，因此会话数据必须在给定时间后过期，以避免所有服务器资源被放弃的会话占用。 当使用会话数据时，您应该意识到数据已经过期并丢失的可能性，特别是在长表单的页面上。 如果用户删除他们的cookies或切换浏览器/设备，它也将丢失。
某些Web框架/开发人员使用隐藏的HTMLinput将数据从表单的一个页面保存到另一个页面，以避免会话过期。
localStorage，sessionStorage和cookie都受到“相同来源”规则的约束，这意味着浏览器应该阻止访问数据，除了从设置信息的域开始。
有关客户端存储技术的更多信息，请参阅Dive Into Html 5 。
这些是JavaScript中“窗口”对象的属性，就像文档是持有DOM对象的窗口对象的属性之一一样。
会话存储属性为页面会话期间可用的每个给定来源维护一个单独的存储区域，即只要浏览器处于打开状态（包括页面重新载入和还原）。
本地存储器执行相同的操作，但是即使浏览器closures并重新打开时仍然存在。
您可以如下设置和检索存储的数据：
sessionStorage.setItem('key', 'value'); var data = sessionStorage.getItem('key');
同样对于localStorage。
-
localStorage的
优点 ：
- Web存储可以被简单地看作是对cookie的改进，提供更大的存储容量。 如果您查看Mozilla源代码，我们可以看到5120KB （ 5MB ，相当于Chrome上的250万个字符 ）是整个域的默认存储大小。 与典型的4KB Cookie相比，这样可以为您提供更多的空间。
- 数据不会被发送回服务器，每个HTTP请求（HTML，图像，JavaScript，CSS等） – 减less客户端和服务器之间的通信量。
- 存储在localStorage中的数据一直存在，直到被明确删除。 所做的更改已保存，并可用于当前和未来对该网站的所有访问。
缺点 ：
- 它在同源策略上工作 。 所以，存储的数据将只能在同一个来源。
-
cookies
优点：
- 与其他人相比，没有什么AFAIK。
缺点：
- 4K限制是针对整个cookie，包括名称，值，到期date等。为了支持大多数浏览器，请将名称保留在4000字节以下，并将整体Cookie大小保持在4093字节以下。
-
数据被发送回服务器为每个HTTP请求（HTML，图像，JavaScript，CSS等） – 增加客户端和服务器之间的stream量。
通常，允许以下内容：
- 共300个cookies
- 每个cookie有4096个字节
- 每个域名20个Cookie
- 每个域81920字节 （给定20个最大大小4096 = 81920字节的cookie）
-
的sessionStorage
优点：
- 它与
localStorage类似。 - 更改仅适用于每个窗口（或Chrome和Firefox等浏览器中的选项卡）。 所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该网站。 窗口closures后，存储被删除
缺点：
- 数据仅在设置它的窗口/选项卡中可用。
- 数据不是持久的，即一旦窗口/标签closures，数据就会丢失。
- 像
localStorage一样，tt工作在同源策略上 。 所以，存储的数据将只能在同一个来源。
- 它与
