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

Question

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

Answer 1

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

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

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

localStorage和sessionStorage

localStorage和sessionStorage是相对较新的API(意思是,并非所有传统浏览器都支持它们)并且几乎完全相同(包括API和功能),唯一的例外是持久性.sessionStorage(顾名思义)仅在浏览器会话期间可用(并且在选项卡或窗口关闭时被删除) - 然而,它确实存在页面重新加载(源DOM存储指南 - Mozilla开发人员网络).

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

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

饼干

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

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

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

localStorage与sessionStorage vs. Cookies

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

客户端与服务器端

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

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

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

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

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

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

Answer 2

1. localStorage的

   优点:

   1. 可以简单地将Web存储视为对cookie的改进,从而提供更大的存储容量.如果您查看Mozilla源代码,我们可以看到5120KB(5MB,相当于Chrome上的250万个字符)是整个域的默认存储大小.与典型的4KB cookie相比,这为您提供了更多的工作空间.
   2. 对于每个HTTP请求(HTML,图像,JavaScript,CSS等),数据不会发送回服务器 - 减少客户端和服务器之间的流量.
   3. 存储在localStorage中的数据将一直存在,直到被明确删除.所做的更改已保存,可用于当前和将来对网站的所有访问.

   缺点:

   1. 它适用于同源策略.因此,存储的数据只能在同一个来源上使用.

2. 饼干

   优点:

   1. 与其他人相比,AFAIK没什么.

   缺点:

   1. 4K限制适用于整个cookie,包括名称,值,到期日期等.要支持大多数浏览器,请将名称保留在4000字节以下,并将整体cookie大小保持在4093字节以下.

   2. 每次HTTP请求(HTML,图像,JavaScript,CSS等)都会将数据发送回服务器 - 增加客户端和服务器之间的流量.

      通常,允许以下内容:

      • 总共300个饼干
      • 每个cookie 4096个字节
      • 每个域20个cookie
      • 每个域81920字节(给定20个最大大小为4096的cookie = 81920字节.)

3. 的sessionStorage

   优点:

   1. 它类似于localStorage.
   2. 数据不是持久性的,即数据仅在每个窗口(或Chrome和Firefox等浏览器中的选项卡)中可用.数据仅在页面会话期间可用.所做的更改将保存并可用于当前页面,以及将来在同一窗口中访问该站点.窗口关闭后,将删除存储.

   缺点:

   1. 数据仅在设置它的窗口/选项卡中可用.
   2. 比如localStorage,tt适用于同源策略.因此,存储的数据只能在同一个来源上使用.

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

确切的用例 -

\n

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

\n

\n

Answer 6

这是一个快速回顾和简单快速的理解

来自freecodecamp 的Beau Carnes老师

Answer 7

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

\n

存储对象是简单的键值存储，与对象类似，但它们在页面加载时保持完整。

\n\n

localStorage.colorSetting = \'#a4509b\';\nlocalStorage[\'colorSetting\'] = \'#a4509b\';\nlocalStorage.setItem(\'colorSetting\', \'#a4509b\');\n

\n\n

键和值始终是字符串。存储任何类型convert it to String然后存储它。始终建议使用Storage interface方法。

\n\n

var testObject = { \'one\': 1, \'two\': 2, \'three\': 3 };\n// Put the object into storage\nlocalStorage.setItem(\'testObject\', JSON.stringify(testObject));\n// Retrieve the object from storage\nvar retrievedObject = localStorage.getItem(\'testObject\');\nconsole.log(\'Converting String to Object: \', JSON.parse(retrievedObject));\n

\n\n

Web Storage 中的两种机制如下：

\n

\n
• sessionStorage为每个给定的源维护一个单独的存储区域^同源策略，该区域在页面会话期间可用（只要浏览器打开，包括页面重新加载和恢复）。
\n
• 本地存储执行相同的操作，但即使关闭并重新打开浏览器，它仍然存在。
\n

\n

\n

存储\xc2\xab本地存储将数据写入磁盘，而会话存储仅将数据写入内存。当您的应用程序退出时，写入会话存储的任何数据都会被清除。

\n

\n

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

\n

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

\n

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

\n

\n

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

  \n

  DOMException。QUOTA_EXCEEDED_ERR 是 22，例如小提琴。

  \n
\n

• 安全错误：Uncaught SecurityError: Access to \'localStorage\' is denied for this document.

  \n

   CHROME:-Privacy and security \xc2\xab Content settings \xc2\xab Cookies \xc2\xab Block third-party cookies.\n

  \n
\n

\n

StorageEvent \xc2\xab 当存储区域更改时，在文档的 Window 对象上触发存储事件。当用户代理要发送 Document 的存储通知时，用户代理必须使用 StorageEvent 将任务排队以在 Document 对象的 Window 对象上触发名为 storage 的事件。

\n

\n

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

\n

\n

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

\n\n

Cookie（网络 Cookie、浏览器 Cookie）Cookie 是一种数据，以名称/值对的形式存储在您计算机上的小文本文件中。

\n

\n

使用Document.cookie进行 JavaScript 访问

\n

\n

还可以使用 Document.cookie 属性通过 JavaScript 创建新的 cookie，如果未设置 HttpOnly 标志，则也可以从 JavaScript 访问现有 cookie。

\n\n

document.cookie = "yummy_cookie=choco"; \ndocument.cookie = "tasty_cookie=strawberry"; \nconsole.log(document.cookie); \n// logs "yummy_cookie=choco; tasty_cookie=strawberry"\n

\n\n

\n

安全和 HttpOnly cookies ^{HTTP 状态管理机制}

\n

\n

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

\n

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

\n\n

Set-Cookie: <cookie-name>=<cookie-value> \nSet-Cookie: <cookie-name>=<cookie-value>; Expires=<date>\n

\n\n

当客户端关闭时，会话 cookie将被删除。它们不指定 Expires 或 Max-Age 指令。

\n\n

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/\n

\n\n

永久 cookie在特定日期 (Expire) 或特定时间长度 (Max-Age) 后过期。

\n\n

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

\n\n

Cookie HTTP 请求标头包含服务器先前使用 Set-Cookie 标头发送的存储的 HTTP cookie。仅 HTTP cookie 无法通过 JavaScript 通过 Document.cookie 属性、XMLHttpRequest 和 Request API 进行访问，以减轻针对跨站点脚本 (XSS) 的攻击。

\n

Cookie 主要用于三个目的：

\n

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

\n

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

\n

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

\n

GitHubGist示例

\n\n

作为总结，

\n

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

\n

Answer 8

本地存储：

• Web 存储可以简单地视为对 cookie 的改进，提供更大的存储容量。可用大小为 5MB，这比典型的 4KB cookie 的工作空间要大得多。

• 数据不会针对每个 HTTP 请求（HTML、图像、JavaScript、CSS 等）发送回服务器 - 减少客户端和服务器之间的流量。

• 存储在 localStorage 中的数据将持续存在，直到显式删除为止。所做的更改将被保存并可供当前和将来对该站点的所有访问使用。

• 它适用于同源策略。因此，存储的数据只能在同一来源上使用。

饼干：

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

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

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

会话存储：

• 它与本地存储类似。

• 更改仅适用于每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）。所做的更改将被保存并可用于当前页面以及将来在同一窗口上访问该网站。窗口关闭后，存储将被删除。数据仅在设置它的窗口/选项卡内可用。

• 数据不是持久的，即一旦窗口/选项卡关闭，数据就会丢失。与 localStorage 一样，它也适用于同源策略。因此，存储的数据只能在同一来源上使用。

Answer 9

本地存储：存储用户信息数据，没有过期日期，用户关闭浏览器窗口时不会删除这些数据，日、周、月和年都可以使用。

在本地存储可以存储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，用于检索存储的值。

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