Html 使用 localStorage 而不是 Cookies 有什么缺点吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16855680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are there any drawbacks to using localStorage instead of Cookies?
提问by Fabien Quatravaux
On my previous websites, I used to use a cookie to display a pre-home page only on the first visit. That worked great (see for example here), but using cookies is not so trendy today, so I want to avoid it as much as possible.
在我以前的网站上，我曾经使用 cookie 仅在第一次访问时显示主页。效果很好（参见此处的示例），但是今天使用 cookie 并不那么流行，所以我想尽可能避免使用它。
Now, my new website projects almost always have pre-home launched via javascript (showing a modalbox), so I don't need to do any action on the server side. I'm considering to use HTML5 localStorage instead of cookies, with a fallback on cookies if the browser does not have localStorage. Is this a good idea? What is the impact in terms of usability, privacy protection and website performance?
现在，我的新网站项目几乎总是通过 javascript（显示一个模态框）启动 pre-home，所以我不需要在服务器端做任何操作。我正在考虑使用 HTML5 localStorage 而不是 cookie，如果浏览器没有 localStorage，则回退 cookie。这是一个好主意吗？在可用性、隐私保护和网站性能方面有何影响？
Using localStorage will improve usability for users that have disabled cookies. But I know that some HTML5 features are only opt-in (like geolocalisation) in some browser. Is there any restriction like that for localStorage on any browser ? Is there any case where I will get a JS error if localStorage is available but deactivated for my site ?
使用 localStorage 将提高禁用 cookie 的用户的可用性。但我知道某些 HTML5 功能只能在某些浏览器中选择加入（如地理定位）。任何浏览器上的 localStorage 是否有类似的限制？如果 localStorage 可用但我的网站已停用，是否会出现 JS 错误？
回答by Vinícius Moraes
Usability
可用性
The user will not know if you are using localStorage or a cookie. If a user disable cookies, localStorage will not work either.
用户不会知道您使用的是 localStorage 还是 cookie。如果用户禁用 cookie，localStorage 也将不起作用。
Performance
表现
There is no noticeable speed difference between the two methods.
两种方法之间没有明显的速度差异。
sessionStorage
会话存储
sessionStorage is only for that browser tab's session. If you close the tab, the session will be lost and the data will be lost too, it's similar to a session variable on any backend language.
sessionStorage 仅用于该浏览器选项卡的会话。如果关闭选项卡，会话将丢失，数据也将丢失，它类似于任何后端语言上的会话变量。
localStorage
本地存储
localStorage will be available for any tab or window in the browser, and will exist until it is deleted by the user or the program. Unlike a cookie, you cannot setup expiration. localStorage has a much larger storage limit as well.
localStorage 可用于浏览器中的任何选项卡或窗口，并且会一直存在，直到被用户或程序删除。与 cookie 不同，您无法设置过期时间。localStorage 也有更大的存储限制。
Your Questions
你的问题
- You are not using this data server side, so you don't need a cookie. localStorage is never sent to the server unlike a cookie.
- If the user disables the cookies, localStorage will not work either.
- 您没有使用此数据服务器端，因此您不需要 cookie。与 cookie 不同，localStorage 永远不会发送到服务器。
- 如果用户禁用 cookie，localStorage 也不会工作。
Fallback Example
回退示例
You can use a Modernizr to verify if localStorage is available and if not, use store a cookie instead.
您可以使用 Modernizr 来验证 localStorage 是否可用，如果不可用，请改用存储 cookie。
if (Modernizr.localstorage) {
// supports HTML5 Storage :D
} else {
// does not support HTML5 Storage :(
}
You can also forego Modernizr and use the check typeof Storage !== 'undefined'.
您也可以放弃 Modernizr 并使用 check typeof Storage !== 'undefined'。
回答by georg
Comparing LS vs cookies is comparing apples to oranges.
比较 LS 与 cookie 是将苹果与橙子进行比较。
Cookies and LS are completely different things for different purposes. LS is a tool that allows your client(javascript code) to store its data locally, without transmitting it to the server. Cookies is a tool for the client-server communication. The whole point of cookies is to be sent over with each request.
Cookies 和 LS 是完全不同的东西，用于不同的目的。LS 是一种工具，它允许您的客户端（javascript 代码）在本地存储其数据，而无需将其传输到服务器。Cookies 是一种用于客户端-服务器通信的工具。cookie 的全部意义在于随每个请求一起发送。
In the past cookies were often abused to emulate the local storage, just because it was the only possibility for a javascript application to write anything to the client's hard drive. But generally LS is not a replacement for cookies, so if you need something that both client and server should read and write, use cookies, not LS.
过去 cookie 经常被滥用来模拟本地存储，只是因为它是 javascript 应用程序向客户端硬盘写入任何内容的唯一可能性。但通常 LS 不是 cookie 的替代品，所以如果您需要客户端和服务器都应该读写的东西，请使用 cookie，而不是 LS。
回答by Norman Xu
One point to add, unlike cookie normally shared cross protocol, the storages stick to same-origin policy. As a consequence sites share the same domain but hosted on different protocol do not share the stored data.
需要补充的一点是，与 cookie 通常共享的跨协议不同，存储坚持同源策略。因此，站点共享相同的域但托管在不同的协议上不共享存储的数据。
Say if your website need to work across http and https. For example, when user clicked the "purchase link" they will land on https secured checkout, then the checkout won't be able to retrieve the data previously stored on http site, even when they share the same domain.
假设您的网站是否需要跨 http 和 https 工作。例如，当用户单击“购买链接”时，他们将登陆 https 安全结账，然后结账将无法检索先前存储在 http 站点上的数据，即使他们共享相同的域。
回答by Isaac
It doesn't look easy for the server to read the localStorage. That may come in handy though, knowing your data is all client-side, making it safe from sniffing.
服务器读取 localStorage 看起来并不容易。不过，这可能会派上用场，因为知道您的数据都是客户端，使其免受嗅探。
Cookies can't be written over, only added to and read:
Cookie 不能被覆盖，只能添加到和读取：
alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);
