localStorage，sessionStorage，session和cookies有什么区别？-Java 学习之路

417

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

7 回答

42

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

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

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

localStorage和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用于身份验证和用户数据的持久性，因此对页面有效的 all cookie将从浏览器发送到服务器，以便 every 请求到同一个域 - 这包括原始页面请求，任何后续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 .

回复于 2024-04-26T16:14:33+08:00
0
- LocalStorage
Pros ：
- 可以简单地查看Web存储，作为对cookie的改进，提供更大的存储容量 . 如果您查看Mozilla源代码，我们可以看到 5120KB （ 5MB 等于Chrome上的 2.5 Million chars ）是整个域的默认存储大小 . 与典型的4KB cookie相比，这为您提供了更多的工作空间 .
- 数据不会针对每个HTTP请求（HTML，图像，JavaScript，CSS等）发送回服务器 - 减少客户端和服务器之间的流量 .
- 存储在localStorage中的数据会一直存在，直到被明确删除 . 所做的更改已保存，可用于当前和将来对网站的所有访问 .
Cons ：
- 适用于same-origin policy . 因此，存储的数据只能在同一个来源上使用 .
- Cookies
Pros:
- 与其他人相比，AFAIK没什么 .
Cons:
- 4K限制适用于整个cookie，包括名称，值，到期日期等 . 要支持大多数浏览器，请将名称保留在4000字节以下，并将整体cookie大小保持在4093字节以下 .
- 数据会针对每个HTTP请求（HTML，图像，JavaScript，CSS等）发送回服务器 - 增加客户端和服务器之间的流量 .
通常，允许以下内容：

总共
- 300 个cookies
  每个cookie
- 4096 bytes
  每个域
- 20 cookies
  每个域
- 81920 bytes （给定20个最大大小为4096的cookie = 81920字节 . ）
- sessionStorage
Pros:
- 类似于 localStorage .
- 数据不是持久的，即数据仅适用于每个窗口（或Chrome和Firefox等浏览器中的选项卡） . 数据仅在页面会话期间可用 . 所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点 . 窗口关闭后，将删除存储 .
Cons:
- 数据仅在设置它的窗口/选项卡中可用 .
- 如 localStorage ，tt适用于same-origin policy . 因此，存储的数据只能在同一个来源上使用 .
回复于 2024-04-26T16:14:33+08:00
21

好的， LocalStorage 为_1100192_本地存储为您的浏览器，它可以保存最多 10MB ， SessionStorage 做同样的，但因为它基于会话并将在关闭浏览器后删除，也可以保存少于LocalStorage，比如up到 5MB ，但 Cookies 是存储在浏览器中的非常小的数据，可以节省 4KB 并且可以通过服务器或浏览器访问...

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

回复于 2024-04-26T16:14:33+08:00
2
这些是JavaScript中“窗口”对象的属性，就像document是保存DOM对象的window对象的属性之一一样 .

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

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

您可以按如下方式设置和检索存储的数据：
```
sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');
```
同样适用于localStorage .
回复于 2024-04-26T16:14:33+08:00
22
Web Storage API提供了一种机制，通过这种机制，浏览器可以以比使用cookie更直观的方式安全地存储键/值对 . Web Storage API使用两个新属性 Window.sessionStorage 和 Window.localStorage 扩展了 Window 对象 . - 调用其中一个将创建Storage对象的实例，通过该实例可以设置，检索和删除数据项 . 每个源（域）的 sessionStorage 和 localStorage 使用不同的Storage对象 .

存储对象是简单的键值存储，类似于对象，但它们通过页面加载保持不变 .
```
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
```
The keys and the values are always strings . 存储任何类型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策略维护一个单独的存储区域，该策略在页面会话期间可用（只要浏览器处于打开状态，包括页面重新加载和恢复） .
- localStorage 做同样的事情，但即使关闭并重新打开浏览器也会持续存在 .
存储«本地存储将数据写入磁盘，而会话存储仅将数据写入内存 . 当您的应用退出时，会清除写入会话存储的所有数据 .

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«使用StorageEvent在文档's Window object when a storage area changes. When a user agent is to send a storage notification for a Document, the user agent must queue a task to fire an event named storage at the Document object'的Window对象上触发存储事件 .

注意：有关实际示例，请参阅Web存储演示 . 看看源代码

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

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请求时，服务器可以发送带响应的Set-Cookie标头 . Cookie通常由浏览器存储，然后通过向Cookie HTTP标头内的同一服务器发出请求来发送cookie .
```
Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
```
当客户端关闭时， Session cookies 将被删除 . 它们未指定Expires或Max-Age指令 .
```
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
```
Permanent cookies 在特定日期（过期）或特定时间段（最长 - 年龄）过期 .
```
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主要用于三个目的：
- Session management «登录，购物车，游戏分数或服务器应记住的任何其他内容
- Personalization «用户首选项，主题和其他设置
- Tracking （记录和分析用户行为）«Cookie具有与之关联的域 . 如果此域名与您所在页面的域名相同，则称该cookie为第一方cookie . 如果域名不同，则称其为第三方cookie . 虽然第一方cookie仅发送给设置它们的服务器，但网页可能包含存储在其他域中服务器上的图像或其他组件（如广告 Banner ） . 通过这些第三方组件发送的Cookie称为第三方Cookie，主要用于在整个网络上进行广告和跟踪 .
Cookies 是发明了解决“如何记住用户信息”的问题：
- 当用户访问网页时，他的名字可以存储在cookie中 .
- 下次用户访问该页面时，属于该页面的cookie将添加到该请求中 . 这样，服务器就可以获得有关用户的必要数据 .
GitHubGist Example

总结一下，
- localStorage在不同的选项卡或窗口上持续存在，即使我们关闭浏览器，也会依据域安全策略和用户选择有关配额限制 .
  如果我们关闭选项卡（顶级浏览上下文），则
- sessionStorage对象不会保留，因为如果我们通过另一个选项卡或窗口浏览则不存在 .
- Web存储（会话，本地）允许我们保存大量的键/值对和大量文本，这是通过cookie无法做到的 .
- 用于敏感操作的Cookie应该只有短暂的生命周期 .
- Cookies主要用于在网络上进行广告和跟踪 . 例如，参见types of cookies used by Google .
- Cookie随每个请求一起发送，因此可能会恶化性能（尤其是移动数据连接） . 用于客户端存储的现代API是Web存储API（localStorage和sessionStorage）和IndexedDB .
回复于 2024-04-26T16:14:33+08:00
2
Local storage: 它保存用户信息数据而没有到期日期当用户关闭浏览器窗口时，这些数据将不会被删除，它将在一天，一周，一个月和一年中可用 .

在本地存储中可以存储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
```
Session Storage: 它与本地存储日期相同，但它会在Web用户关闭浏览器窗口时删除所有窗口 .

在会话存储中可以存储多达5 MB的数据
```
//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";
```
Session ：会话是存储在服务器上的全局变量 . 为每个会话分配一个唯一的ID，用于检索存储的值 .

Cookies ：Cookie是计算机上的数据，以小文本文件形式存储为名称 - 值对 . 设置cookie后，后面的所有页面请求都会返回cookie名称和值 .
回复于 2024-04-26T16:14:33+08:00
616

所有会话的本地存储，一个会话会话的会话存储数据将针对每个HTTP请求发送回服务器 . 你也可以真正的这篇文章到现在关于webstorage

回复于 2024-04-26T16:14:33+08:00

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

7 回答

localStorage和sessionStorage

Cookies

localStorage与sessionStorage vs. Cookies

客户端与服务器端

相关问题