localStorage和sessionStorage

Question

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

Answer 1

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

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

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

localStorage和sessionStorage

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

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

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

缓存

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

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

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

localStorage vs. sessionStorage vs. Cookies

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

客户端与服务器端

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

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

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

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

localStorage，sessionStorage和cookies均受＆＃34;同源＆＃34;规则，这意味着浏览器应该阻止访问除设置信息的域以外的数据。

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

Answer 2

<强> LocalStorage

优点：
1. 可以简单地将Web存储视为对cookie的改进，提供更大的存储容量。如果您查看Mozilla源代码，我们可以看到 5120KB （ 5MB ，等于Chrome上的 250万个字符）是默认的存储空间大小整个域名。与典型的4KB cookie相比，这为您提供了更多的工作空间。
2. 每次HTTP请求（HTML，图像，JavaScript，CSS等）都不会将数据发送回服务器 - 减少了客户端和服务器之间的流量。
3. 存储在localStorage中的数据会一直存在，直到被明确删除。所做的更改已保存，可用于当前和将来对网站的所有访问。
4. <强> Cookies
  
  <强>优点：
  1. 与其他人相比，AFAIK没什么。
  2. <强> sessionStorage
    
    <强>优点：
    1. 类似于localStorage。
    2. 数据不是永久性的，即数据仅适用于每个窗口（或Chrome和Firefox等浏览器中的标签）。数据仅在页面会话期间可用。所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。

Answer 3

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

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

Answer 4

这些是＆＃39; window＆＃39;的属性。 JavaScript中的对象，就像document是保存DOM对象的window对象的属性之一。

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

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

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

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

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

同样适用于localStorage。

Answer 5

这里是一个快速的评论，并且具有简单而快速的理解

来自 freecodecamp

的老师博恩·卡恩斯

Answer 6

本地存储：它会一直存储用户信息数据而不会过期，当用户关闭浏览器窗口时，该数据将不会被删除。

本地存储： >

在本地存储中可以存储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

会话存储：与本地存储日期相同，不同之处在于它将在网络用户关闭浏览器窗口时删除所有窗口。

在会话存储中，最多可以存储5 mb数据

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

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

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

Answer 7

LocalStorage ：

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

饼干：

我们可以为每个cookie设置过期时间
4K限制适用于整个cookie，包括名称，值，有效期等。要支持大多数浏览器，请将该名称保留在4000字节以下，并将cookie的整体大小保留在4093字节以下。
< / li>
每个HTTP请求（HTML，图像，JavaScript，CSS等）会将数据发送回服务器，从而增加了客户端与服务器之间的通信量。

sessionStorage：

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

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

7 个答案:

localStorage和sessionStorage

缓存

localStorage vs. sessionStorage vs. Cookies

客户端与服务器端