小开

最佳答案

这是一个范围极其广泛的问题，许多利弊将与情况相关。

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

localStorage、会话存储和cookie都是客户端存储解决方案。会话数据保存在服务器上，在那里它仍然由您直接控制。

本地存储和会话存储

本地存储和会话存储是相对较新的应用程序接口（这意味着，不是所有的传统浏览器都支持它们），并且几乎相同（在应用程序接口和功能方面），唯一的例外是持久性。会话存储（顾名思义）仅在浏览器会话期间可用（并且在选项卡或窗口关闭时被删除）-但是，它可以存活页面重新加载（来源DOM存储指南-Mozilla Developer Network）。

显然，如果您存储的数据需要持续可用，那么localStorage比sionsionStorage更可取-尽管您应该注意到两者都可以被用户清除，因此您不应该依赖数据的持续存在。

localStorage和essionStorage非常适合在页面之间持久化客户端脚本中所需的非敏感数据（例如：偏好设置、游戏中的分数）。存储在localStorage和essionStorage中的数据可以很容易地从客户端/浏览器中读取或更改，因此不应依赖于应用程序中敏感或安全相关数据的存储。

Cookies

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

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

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

本地存储vs.会话存储vs. Cookie

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

客户端vs.服务器端

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

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

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

一些Web框架/开发人员使用隐藏的超文本标记语言输入将数据从表单的一个页面持久化到另一个页面，以避免会话过期。

localStorage、会话存储和cookie都受“同源”规则的约束，这意味着浏览器应阻止访问数据，但设置信息以开始的域除外。

有关客户端存储技术的更多信息，请参阅深入了解Html 5。

小开

这些是JavaScript中“窗口”对象的属性，就像Document是包含DOM对象的窗口对象的属性之一一样。

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

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

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

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


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

与localStorage类似。

小开

本地存储

优点：
1. Web存储可以简单地看作是对cookie的改进，提供了更大的存储容量。如果您查看Mozilla源代码，我们可以看到5120KB（5MB在Chrome上等于250万字符）是整个域的默认存储大小。这为您提供了比典型的4KB cookie更多的工作空间。
2. 对于每个HTTP请求（超文本标记语言、图像、JavaScript、CSS等），数据不会发送回服务器-减少客户端和服务器之间的流量。
3. 存储在localStorage中的数据会持续存在，直到显式删除。所做的更改会被保存并可供所有当前和未来访问该站点。
缺点：
1. 它适用于主域同源策略。因此，存储的数据仅在同一来源上可用。
Cookies

优点：
1. 与其他人相比，没有什么AFAIK。
缺点：
1. 4K限制适用于整个cookie，包括名称、值、到期日期等。为了支持大多数浏览器，请将名称保持在4000字节以下，并将cookie的整体大小保持在4093字节以下。
2. 每个HTTP请求（超文本标记语言、图像、JavaScript、CSS等）都会将数据发送回服务器-增加客户端和服务器之间的流量。
通常，允许以下内容：
- 300 cookie总数
- 每个cookie4096字节
- #每个域EYZ0
- #每个域EYZ0（给定20个最大大小为4096=81920字节的cookie。）
会话存储

优点：
1. 它类似于localStorage。
2. 数据不是持久的，即数据仅在每个窗口（或Chrome和Firefox等浏览器中的选项卡）可用。数据仅在页面会话期间可用。所做的更改会保存并可用于当前页面，以及将来访问同一选项卡/窗口上的站点。一旦选项卡/窗口关闭，数据将被删除。
缺点：
1. 数据仅在设置它的窗口/选项卡内可用。
2. 与localStorage一样，它适用于主域同源策略。因此，存储的数据只能在同一来源上可用。

Checkout跨标签-如何促进跨源浏览器选项卡之间的轻松通信。

小开

好的，本地存储，因为它被称为浏览器的本地存储，它可以保存多达10MB，会话存储做同样的事情，但正如它的名字所说，它是基于会话的，关闭浏览器后将被删除，也可以保存比LocalStorage少，像5MB，但Cookies是非常小的数据存储在您的浏览器中，可以保存多达4KB，可以通过服务器或浏览器访问…

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

小开

Web Storage API提供了浏览器可以安全地存储键/值对的机制，比使用cookie更直观。网络存储API使用两个新属性扩展了Window对象-Window.sessionStorage和Window.localStorage。-调用其中一个将创建Storage对象的实例，可以通过该实例设置、检索和删除数据项。每个源（域）的#EYZ3和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存储中的两种机制如下：

会话存储为每个给定的源^同源策略维护一个单独的存储区域，该区域在页面会话期间可用（只要浏览器打开，包括页面重新加载和恢复）。
本地存储做同样的事情，但即使浏览器关闭并重新打开也会持续存在。

存储"本地存储将数据写入磁盘，而会话存储仅将数据写入内存。应用退出时，写入会话存储的任何数据都会被清除。

每个浏览器的最大可用存储空间不同，但大多数浏览器至少实现了w3c建议的最大存储限制5MB。

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

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

配额超出错误：当超过此函数window.sessionStorage.setItem(key, value);的存储限制时，如果无法设置新值，则会引发“QuotaExceededError”DOMException异常。（如果用户禁用了站点的存储，或者超过了配额，则设置可能会失败。）

QUOTA_EXCEEDED_ERR22岁，示例小提琴。
安全错误：Uncaught SecurityError: Access to 'localStorage' is denied for this document。
```
 CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.
```

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

注意：有关真实世界的示例，请参阅Web存储演示。^{查看源代码}

监听dom/Window上的存储事件以捕获存储中的更改。小提琴。

Cookies（网络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 cookie^{HTTP状态管理机制}

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

当接收到HTTP请求时，服务器可以发送带有响应的设置Cookie标头。cookie通常由浏览器存储，然后cookie在Cookie 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。无法通过JavaScript通过Document.cookie属性、XMLHttpRequest和Request API访问仅限HTTP的cookie，以减轻对跨站点脚本（XSS）的攻击。

Cookie主要用于三个目的：

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

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

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

代码库GitHubGist示例

作为总结，

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

小开

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

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

//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

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

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

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

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

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

小开

本地存储：

Web存储可以简单地看作是对 Cookie，提供更大的存储容量。可用大小为 5MB，比典型的4KB有更多的工作空间 cookie。
不是每个HTTP请求都会将数据发送回服务器（超文本标记语言，图像，JavaScript，CSS等）-减少客户端和服务器之间的流量。
存储在localStorage中的数据会持续存在，直到显式删除。所做的更改被保存并可用于所有当前和未来
它适用于主域同源策略。因此，存储的数据只会可在同一来源上使用。

Cookies：

我们可以设置每个cookie的过期时间

4K限制适用于整个cookie，包括名称、值、到期日期等。为了支持大多数浏览器，请将名称保持在4000字节以下，并将cookie的整体大小保持在4093字节以下。

每个HTTP请求（超文本标记语言、图像、JavaScript、CSS等）都会将数据发送回服务器-增加客户端和服务器之间的流量。

会话存储

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

小开

这里是一个快速审查，并与一个简单和快速的理解

来自讲师beaucarnes来自freecodecamp

小开

本地存储

使用localStorage存储的数据没有到期日期，只能通过JavaScript或清除浏览器缓存/本地存储数据来清除。
存储限制是三者中的最大值。
存储在localStorage中的数据会持续存在，直到显式删除。所做的更改会被保存并可供所有当前和未来访问该站点。
它适用于主域同源策略。因此，存储的数据仅在同一源上可用。

会话存储接口

它仅为会话存储数据，这意味着数据将存储到浏览器（或选项卡）关闭为止。
数据永远不会传输到服务器。
更改仅适用于每个窗口（或Chrome和Firefox等浏览器中的选项卡）。所做的更改将被保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。

小开

确切的用例-

如果您希望您的页面始终保存一些非机密数据，那么您可以使用localStorage。
如果服务器需要知道一些信息，例如身份验证密钥，您应该使用cookies来存储它们。
sessionStorage可以用来存储界面的状态，即，每当您访问一个页面、自定义它、访问另一个页面并返回同一页面时，您都希望向页面显示用户是如何自定义它的。这是sessionStorage的一个很好的用例。

localStorage、会话存储、会话和cookie有什么区别？

本地存储和会话存储

Cookies

本地存储vs.会话存储vs. Cookie

客户端vs.服务器端