Html localStorage 与 sessionStorage 与 cookie

localStorage vs sessionStorage vs cookies

提问by Non

I am working in an app where I need to keep some data during the user is logged in and I have that question, what is the difference among localStorage, sessionStorage, cookies ???

我在一个应用程序中工作，我需要在用户登录期间保留一些数据，我有这个问题，localStorage、sessionStorage、cookies 之间有什么区别？？？

I was asking what can I use in order to persist some data in the DOM, even if the user refresh the page, some people says: use sessionStorage, or localStorage, then, someone came up with the idea of use ngCookiesbecause it works in every browser, but, which should I use ?

我在问我可以用什么来在 DOM 中持久化一些数据，即使用户刷新页面，有人说：使用 sessionStorage 或 localStorage，然后，有人想出了使用ngCookies的想法，因为它适用于每个浏览器，但是，我应该使用哪个？

回答by Rouby

localStorageand sessionStorageare both so-called WebStoragesand features of HTML5.

localStorage和sessionStorage都是所谓的WebStorage和 HTML5 的特性。

localStoragestores information as long as the user does not delete them.

localStorage存储信息，只要用户不删除它们。

sessionStoragestores information as long as the session goes. Usually until the user closes the tab/browser.

sessionStorage 会在会话期间存储信息。通常直到用户关闭选项卡/浏览器。

cookiesare simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

cookie只是 cookie，旧浏览器支持它们，通常是使用上述WebStorages 的框架的后备。

In contrast cookies can store way less information then WebStorages and the information in WebStorages is never transferred to the server.

相比之下，cookie 可以存储的信息比 WebStorages 少得多，而且 WebStorages 中的信息永远不会传输到服务器。

Keep in mind that the EU has a regulation that requires websites to inform their users about the usage of cookies. I dont know whether this also applies to WebStorages

请记住，欧盟有一项法规要求网站通知其用户有关 cookie 的使用情况。我不知道这是否也适用于 WebStorages

回答by Hymanie Dong

sessionStorage object:The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

sessionStorage 对象：sessionStorage 对象仅存储会话的数据，这意味着数据会一直存储到浏览器（或选项卡）关闭为止。当文件在本地运行时它不可用。

Data stored in the sessionStorage object is accessible only from the page that initially stored the data; so this doesn't meet your requirement

存储在 sessionStorage 对象中的数据只能从最初存储数据的页面访问；所以这不符合您的要求

localStorage object:Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser's cache.

localStorage 对象：使用 localStorage 对象存储的数据将被持久化，直到它通过 JavaScript 被明确删除或用户清除浏览器的缓存。

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

存储在 localStorage 对象中的数据只能从最初存储数据的域访问。

For your case, I think you make consider about using cookie or session, pls. note cookie has 4K size limitation per server.

对于您的情况，我认为您可以考虑使用 cookie 或 session，请。注意 cookie 每台服务器的大小限制为 4K。

回答by Ali

Addition to other answers, WebStorages cannot access subdomain and/or parent domain.

除了其他答案，WebStorages 无法访问子域和/或父域。

回答by Anush

LocalStorage- Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data. Storage limit is the maximum amongst the three

LocalStorage- 存储没有到期日期的数据，只能通过 JavaScript 清除，或清除浏览器缓存/本地存储的数据。存储限制是三个中的最大值

SessionStorage- The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Data is never transferred to the server. Storage limit is larger than a cookie (at least 5MB).

SessionStorage- sessionStorage 对象仅为会话存储数据，这意味着数据将一直存储到浏览器（或选项卡）关闭。数据永远不会传输到服务器。存储限制大于 cookie（至少 5MB）。

Cookie- Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side). Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side. Size must be less than 4KB. Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie.

Cookie- 存储必须随后续请求发送回服务器的数据。它的到期时间因类型而异，到期时间可以从服务器端或客户端（通常从服务器端）设置。Cookies 主要用于服务端读取（也可以在客户端读取），localStorage 和 sessionStorage 只能在客户端读取。大小必须小于 4KB。可以通过将该 cookie 的 httpOnly 标志设置为 true 来确保 cookie 的安全。这可以防止客户端访问该 cookie。

回答by Prashant Biradar

localStorage : 1. Data Limit : 5 MB 2. Data sent for every http request : no

localStorage：1. 数据限制：5 MB 2. 为每个 http 请求发送的数据：否

sessionStorage : 1. Data Limit : 5 MB 2. Data sent for every http request : no 3. Data will be cleared once window or tab is closed

sessionStorage：1. 数据限制：5 MB 2. 为每个 http 请求发送的数据：否 3. 一旦窗口或选项卡关闭，数据将被清除

I would say, use localstorage/sessionStorage if data is non sensitive else use cookies

我会说，如果数据不敏感，则使用 localstorage/sessionStorage，否则使用 cookie

回答by Shivappa

Cookies are just hold 4kbs data and as expiry time.

Cookie 仅保存 4kbs 数据并作为到期时间。

localStorage are permanent cookies holds 4 MB data it will delete when user clears cache

localStorage 是永久 cookie 保存 4 MB 数据，当用户清除缓存时它将删除