localStorage，sessionStorage，session和cookies有什么区别？

Question

localStorage，sessionStorage，session和cookies的技术优势和缺点是什么？我何时使用其中一个？

Answer 1

这是一个范围非常广泛的问题，很多优点/缺点都与情况有关。

在所有情况下，这些存储机制将特定于单个计算机/设备上的单个浏览器。任何跨会话持续存储数据的要求都需要涉及您的应用服务器端 - 最有可能使用数据库，但可能使用XML或文本/ CSV文件。

localStorage，sessionStorage和cookies都是客户端存储解决方案。会话数据保存在服务器上，直接由您控制。

localStorage and sessionStorage

localStorage和sessionStorage是相对较新的API（意思是，并非所有传统浏览器都支持它们）并且几乎完全相同（包括API和功能），唯一的例外是持久性。 sessionStorage（顾名思义）仅在浏览器会话期间可用（并且在选项卡或窗口关闭时被删除） - 然而，它确实存在页面重新加载（源DOM Storage guide - Mozilla Developer Network）。

显然，如果您正在存储的数据需要持续可用，那么localStorage比sessionStorage更可取 - 尽管您应该注意两者都可以被用户清除，因此您不应该依赖于任何一种情况下数据的持续存在。

localStorage和sessionStorage非常适合在页面之间保存客户端脚本中所需的非敏感数据（例如：首选项，游戏中的分数）。存储在localStorage和sessionStorage中的数据可以在客户端/浏览器中轻松读取或更改，因此不应依赖于在应用程序中存储敏感或安全相关的数据。

Cookies

对于cookie也是如此，这些可以被用户轻易篡改，并且也可以以纯文本方式从中读取数据 - 因此，如果您想要存储敏感数据，那么会话实际上是您唯一的选择。如果您不使用SSL，cookie信息也可能在传输过程中被截获，尤其是在开放的WiFi上。

从积极的方面来看，通过设置仅HTTP标记，可以从跨站点脚本（XSS）/脚本注入等安全风险中获得一定程度的保护，这意味着现代（支持）浏览器将阻止从JavaScript访问cookie和值（这也会阻止您自己的合法JavaScript访问它们。这对于身份验证cookie尤其重要，身份验证Cookie用于存储包含登录用户详细信息的令牌 - 如果您拥有该cookie的副本，那么就所有意图和目的而言，只要Web应用程序成为该用户，关注，并具有相同的用户访问数据和功能。

由于cookie用于身份验证和用户数据的持久性，因此对于同一域的每个请求，所有对页面有效的cookie都会从浏览器发送到服务器 - 这包括原始页面请求，任何后续Ajax请求，所有图像，样式表，脚本和字体。因此，cookie不应用于存储大量信息。浏览器还可以对可以存储在cookie中的信息的大小施加限制。通常，cookie用于存储用于身份验证，会话和广告跟踪的标识令牌。令牌通常不是人类可读的信息本身，而是链接到您的应用程序或数据库的加密标识符。

localStorage vs. sessionStorage vs. Cookies

在功能方面，cookies，sessionStorage和localStorage只允许您存储字符串 - 可以在设置时隐式转换原始值（这些将需要转换回来，以便在读取后将它们用作类型）但不能转换为对象或数组（JSON可以将它们序列化以使用API​​存储它们）。会话存储通常允许您存储服务器端语言/框架支持的任何基元或对象。

Client-side vs. Server-side

由于HTTP是无状态协议 - Web应用程序无法在返回网站时识别以前访问的用户 - 会话数据通常依赖于cookie令牌来识别用户重复访问（尽管很少有URL参数可用于同样的目的）。数据通常具有滑动到期时间（每次用户访问时更新），并且根据您的服务器/框架数据将被存储在进程中（意味着数据将在Web服务器崩溃或重新启动时丢失）或外部存储状态服务器或数据库。使用Web场（给定网站的多个服务器）时，这也是必需的。

由于会话数据完全由您的应用程序（服务器端）控制，因此它是本质上任何敏感或安全的最佳位置。

服务器端数据的明显缺点是可扩展性 - 在会话期间每个用户都需要服务器资源，并且每个请求都必须发送客户端所需的任何数据。由于服务器无法知道用户是否导航到另一个站点或关闭其浏览器，因此会话数据必须在给定时间后过期，以避免被放弃的会话占用所有服务器资源。因此，在使用会话数据时，您应该意识到数据可能已过期并丢失，尤其是在具有长格式的页面上。如果用户删除其cookie或切换浏览器/设备，它也将丢失。

一些Web框架/开发人员使用隐藏的HTML输入将数据从表单的一个页面持久保存到另一个页面，以避免会话过期。

localStorage，sessionStorage和cookie都受“同源”规则的约束，这意味着浏览器应该阻止访问除设置信息开头的域之外的数据。

有关客户端存储技术的进一步阅读，请参阅Dive Into Html 5。

Answer 2

1. LocalStorage 优点： 可以简单地将Web存储视为对cookie的改进，从而提供更大的存储容量。如果您查看Mozilla源代码，我们可以看到5120KB（5MB，相当于Chrome上的250万个字符）是整个域的默认存储大小。与典型的4KB cookie相比，这为您提供了更多的工作空间。 对于每个HTTP请求（HTML，图像，JavaScript，CSS等），数据不会发送回服务器 - 减少客户端和服务器之间的流量。 存储在localStorage中的数据将一直存在，直到被明确删除。所做的更改将保存，并可用于该网站的所有当前和未来访问。 缺点： 它适用于same-origin policy。因此，存储的数据只能在同一个来源上使用。
2. Cookies 优点： 与其他人相比，AFAIK没什么。 缺点： 4K限制适用于整个cookie，包括名称，值，到期日期等。要支持大多数浏览器，请将名称保留在4000字节以下，并将整体cookie大小保持在4093字节以下。 每次HTTP请求（HTML，图像，JavaScript，CSS等）都会将数据发送回服务器 - 增加客户端和服务器之间的流量。 通常，允许以下内容： 总共300个饼干 每个cookie 4096个字节 每个域20个cookie 每个域81920字节（给定20个最大大小为4096的cookie = 81920字节。）
3. sessionStorage 优点： 它类似于localStorage。 数据不是持久的，即数据仅在每个窗口（或Chrome和Firefox等浏览器中的选项卡）中可用。数据仅在页面会话期间可用。所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，将删除存储。 缺点： 数据仅在设置它的窗口/选项卡中可用。 像localStorage一样，它适用于same-origin policy。因此，存储的数据只能在同一个来源上使用。

结帐across-tabs - 如何促进跨源浏览器选项卡之间的轻松通信。

Answer 3

好吧，LocalStorage因为它被称为浏览器的本地存储，它可以节省高达10MB，SessionStorage也是如此，但正如它的名字所说，它是基于会话的，将在关闭浏览器后删除，也可以比LocalStorage节省更多，像高达5MB，但Cookies是存储在浏览器中的非常小的数据，可以节省4KB，可以通过服务器或浏览器访问...

我还创建了下面的图像，一目了然地显示差异：

Answer 4

这些是JavaScript中“窗口”对象的属性，就像document是保存DOM对象的window对象的属性之一一样。

会话存储属性为每个给定的源保留一个单独的存储区域，该区域在页面会话期间可用，即只要浏览器处于打开状态，包括页面重新加载和恢复。

本地存储执行相同的操作，但即使关闭并重新打开浏览器也会保留。

您可以按如下方式设置和检索存储的数据：

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

同样适用于localStorage。

Answer 5

Web Storage API提供了一种机制，通过这种机制，浏览器可以以比使用cookie更直观的方式安全地存储键/值对。 Web Storage API扩展了Window对象的两个新属性 - Window.sessionStorage和Window.localStorage。 - 调用其中一个将创建Storage对象的实例，通过该实例可以设置，检索和删除数据项。对于每个原点（域），sessionStorage和localStorage使用不同的Storage对象。

存储对象是简单的键值存储，类似于对象，但它们通过页面加载保持不变。

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 Storage中的两种机制如下：

• sessionStorage为每个给定的originSame-origin policy维护一个单独的存储区域，该区域在页面会话期间可用（只要浏览器处于打开状态，包括页面重新加载和恢复）。
• localStorage做同样的事情，但即使在浏览器关闭并重新打开时仍然存在。

Storage«Local storage将数据写入磁盘，而会话存储仅将数据写入内存。当您的应用退出时，会清除写入会话存储的所有数据。

maximum storage available is different per browser，但大多数浏览器至少实现了w3c建议的最大存储限制为5MB。

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

始终捕获LocalStorage安全性和配额超出错误

• QuotaExceededError：当存储限制超过此函数window.sessionStorage.setItem(key, value);时，如果无法设置新值，则会抛出“QuotaExceededError”DOMException异常。 （例如，如果用户已禁用该站点的存储，或者已超出配额，则设置可能会失败。） DOMException.QUOTA_EXCEEDED_ERR is 22，示例fiddle。
• SecurityError：Uncaught SecurityError: Access to 'localStorage' is denied for this document。 CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.

StorageEvent«当存储区域发生变化时，会在文档的Window对象上触发存储事件。当用户代理要为Document发送存储通知时，用户代理必须使用StorageEvent对任务进行排队，以在Document对象的Window对象上触发名为storage的事件。

注意：有关实际示例，请参阅Web Storage Demo。 check out the source code

在dom / Window上收听存储事件以捕获存储中的更改。 fiddle。

---

Cookie（网络Cookie，浏览器Cookie）Cookie是计算机上的数据，以小文本文件形式存储为名称 - 值对。

使用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饼干HTTP State Management Mechanism

Cookie通常在Web应用程序中用于标识用户及其经过身份验证的会话

当收到HTTP请求时，服务器可以发送带响应的Set-Cookie头。 Cookie通常由浏览器存储，然后通过向Cookie HTTP标头内的同一服务器发出请求来发送cookie。

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将在特定日期（过期）或特定时间段（Max-Age）过期。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Cookie HTTP请求标头包含先前由服务器使用Set-Cookie标头发送的存储的HTTP Cookie。不能通过JavaScript通过Document.cookie属性，XMLHttpRequest和Request API访问仅HTTP的cookie，以减轻对跨站点脚本（XSS）的攻击。

Cookie主要用于三个目的：

• 会话管理«登录，购物车，游戏分数或服务器应记住的任何其他内容
• 个性化«用户偏好，主题和其他设置
• 跟踪（记录和分析用户行为）«Cookie具有与之关联的域。如果此域名与您所在页面的域名相同，则称该cookie为第一方cookie。如果域名不同，则称其为第三方cookie。虽然第一方cookie仅发送给设置它们的服务器，但网页可能包含存储在其他域中服务器上的图像或其他组件（如广告横幅）。通过这些第三方组件发送的Cookie称为第三方Cookie，主要用于在整个网络上进行广告和跟踪。

发明Cookie是为了解决“如何记住用户信息”的问题：

• 当用户访问网页时，他的名字可以存储在cookie中。
• 下次用户访问该页面时，属于该页面的cookie将添加到该请求中。这样，服务器获取必要的数据以“记住”有关用户的信息。

GitHub Gist qazxsw poi

---

总结一下，

• localStorage在不同的选项卡或窗口上持续存在，即使我们关闭浏览器，也会依据域安全策略和用户选择有关配额限制。
• 如果我们关闭选项卡（顶级浏览上下文），sessionStorage对象不会保留，因为如果我们通过另一个选项卡或窗口浏览它不存在。
• Web存储（会话，本地）允许我们保存大量的键/值对和大量文本，这是通过cookie无法做到的。
• 用于敏感操作的Cookie应仅具有较短的生命周期。
• Cookie主要用于在网络上进行广告和跟踪。例如，参见Example。
• Cookie随每个请求一起发送，因此可能会降低性能（尤其是移动数据连接）。用于客户端存储的现代API是Web存储API（localStorage和sessionStorage）和IndexedDB。

Answer 6

本地存储：它保存用户信息数据而没有到期日期当用户关闭浏览器窗口时，这些数据将不会被删除，它将在一天，一周，一个月和一年中可用。

在本地存储中可以存储5-10mb的离线数据。

types of cookies used by Google

会话存储：与本地存储日期相同，只是当浏览器窗口被Web用户关闭时，它将删除所有窗口。

在会话存储中可以存储多达5 MB的数据

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

会话：会话是存储在服务器上的全局变量。为每个会话分配一个唯一的ID，用于检索存储的值。

Cookie：Cookie是计算机上的数据，以小文本文件形式存储为名称 - 值对。设置cookie后，后面的所有页面请求都会返回cookie名称和值。

Answer 7

localStorage的：

• 可以简单地将Web存储视为对cookie的改进，从而提供更大的存储容量。可用大小为5MB，与典型的4KB cookie相比，可以使用的空间大得多。
• 对于每个HTTP请求（HTML，图像，JavaScript，CSS等），数据不会发送回服务器 - 减少客户端和服务器之间的流量。
• 存储在localStorage中的数据将一直存在，直到被明确删除。所做的更改将保存，并可用于该网站的所有当前和未来访问。
• 它适用于同源策略。因此，存储的数据只能在同一个来源上使用。

饼干：

• 我们可以设置每个cookie的到期时间
• 4K限制适用于整个cookie，包括名称，值，到期日期等。要支持大多数浏览器，请将名称保留在4000字节以下，并将整体cookie大小保持在4093字节以下。
• 每次HTTP请求（HTML，图像，JavaScript，CSS等）都会将数据发送回服务器 - 增加客户端和服务器之间的流量。

sessionStorage的：

• 它类似于localStorage。
• 更改仅适用于每个窗口（或Chrome和Firefox等浏览器中的标签）。所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。数据仅在设置它的窗口/选项卡中可用。
• 数据不是持久的，即一旦窗口/标签关闭就会丢失。与localStorage一样，它适用于同源策略。因此，存储的数据只能在同一个来源上使用。