本地存储vscookies

我想通过将所有的cookie移动到本地存储来减less我的网站上的加载时间，因为它们似乎具有相同的function。 除了显而易见的兼容性问题之外，使用本地存储replaceCookiefunction有什么优点/缺点（尤其是性能方面）？

Answer 1

Cookie和本地存储服务于不同的目的。 Cookies主要用于读取服务器端 ，本地存储只能由客户端读取。 所以问题是，在你的应用程序中，谁需要这些数据 – 客户端还是服务器？

如果这是你的客户（你的JavaScript），那么通过一切手段切换。 您通过发送每个HTTP标头中的所有数据来浪费带宽。

如果它是你的服务器，本地存储不是很有用，因为你必须以某种方式转发数据（使用Ajax或隐藏的表单域或其他）。 这可能是好的，如果服务器只需要每个请求的总数据的一小部分。

尽pipe如此，您仍然希望将会话cookie作为cookie保留。

根据技术差异，也是我的理解：

1. 除了保存数据的旧方法之外，Cookies还会为您提供4096个字节（实际上为4095 个字符）的限制，即每个Cookie。 本地存储大小为每个域5MB – 所以问题也提到了它

2. localStorage是Storage接口的一个实现。 它存储的数据没有过期date ， 只能通过JavaScript清除，或清除浏览器caching/本地存储数据 – 不像cookie过期。

Answer 2

在JWTs的情况下 ，Stormpath写了一篇相当有用的文章，概述了可能的存储方法，以及与每种方法有关的（dis）优点。

它还简要介绍了XSS和CSRF攻击，以及如何对付它们。

我附上了以下文章的一些简短摘录，以防他们的文章脱机/他们的网站宕机。

本地存储

问题：

Web存储（localStorage / sessionStorage）可以通过JavaScript访问同一个域。 这意味着您网站上运行的任何JavaScript都将有权访问Web存储，因此可能容易受到跨站点脚本（XSS）攻击的影响。 简而言之，XSS是一种攻击者可以注入将在您的页面上运行的JavaScript的漏洞。 基本的XSS攻击尝试通过表单input注入JavaScript，攻击者在这里input警报（“你被黑客攻击”）; 转换成一个表格，看看它是否由浏览器运行，并可以被其他用户查看。

预防：

为了防止XSS，常见的反应是转义和编码所有不可信的数据。 但是，这远不是完整的故事。 2015年，现代networking应用程序使用托pipe在CDN或外部基础设施上的JavaScript。 现代Web应用程序包括用于A / Btesting，漏斗/市场分析和广告的第三方JavaScript库。 我们使用像Bower这样的包pipe理器将其他人的代码导入到我们的应用程序中。

如果只有一个使用的脚本受到攻击，该怎么办？ 恶意JavaScript可以embedded在页面上，并且Web存储受到威胁。 这些types的XSS攻击可以在不知情的情况下获取访问您网站的所有人的networking存储。 这可能是为什么一些组织build议​​不要存储任何有价值的东西或信任任何信息在networking存储。 这包括会话标识符和令牌。

作为存储机制，Web存储在传输过程中不执行任何安全标准。 无论谁读取Web Storage并使用它，都必须进行尽职调查，以确保始终通过HTTPS发送JWT，而不会使用HTTP。

cookies

问题：

Cookie与HttpOnly Cookie标志一起使用时，不能通过JavaScript访问，并且对XSS不起作用。 您还可以设置安全cookie标记以保证cookie仅通过HTTPS发送。 这是过去利用cookie来存储令牌或会话数据的主要原因之一。 现代开发人员不愿意使用cookie，因为他们传统上要求将状态存储在服务器上，从而打破了RESTful最佳实践。 如果您要在Cookie中存储JWT，则Cookie作为存储机制不需要将状态存储在服务器上。 这是因为JWT封装了服务器为服务请求提供的所有内容。

但是，Cookie很容易受到不同types的攻击：跨站请求伪造（CSRF）。 CSRF攻击是指恶意网站，电子邮件或博客导致用户的Web浏览器在用户当前通过身份validation的受信任站点上执行不需要的操作时发生的攻击types。 这是浏览器如何处理cookies的一个漏洞。 Cookie只能发送到允许的域名。 默认情况下，这是最初设置cookie的域。 无论您是在galaxies.com或hahagonnahackyou.com上，cookie都将被发送请求。

预防：

可以通过使用同步的令牌模式来阻止CSRF。 这听起来很复杂，但是所有现代的web框架都支持这个。

例如，AngularJS有一个解决scheme来validation该cookie只能被你的域访问。 直接从AngularJS文档：

执行XHR请求时，$ http服务从cookie（默认为XSRF-TOKEN）中读取一个标记，并将其设置为HTTP标头（X-XSRF-TOKEN）。 由于只有在您的域上运行的JavaScript才能读取cookie，因此您的服务器可以确保XHR来自运行在您的域上的JavaScript。 您可以通过包含xsrfToken JWT声明来使此CSRF保护无状态：

 { "iss": "http://galaxies.com", "exp": 1300819380, "scopes": ["explorer", "solar-harvester", "seller"], "sub": "[e-mail]", "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e" } 

充分利用您的Web应用程序框架的CSRF保护function，使得Cookie可以稳固地存储JWT。 也可以通过检查API的HTTP Referer和Origin头来部分阻止CSRF。 CSRF攻击将具有与您的应用程序无关的Referer和Origin标头。

完整的文章可以在这里find： https : //stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

他们也有一个关于如何最好地devise和实现JWT的有用的文章，关于令牌本身的结构： https ://stormpath.com/blog/jwt-the-right-way/

Answer 3

通过localStorage ，Web应用程序可以在用户的​​浏览器中本地存储数据。 在HTML5之前，应用程序数据必须存储在cookie中，并包含在每个服务器请求中。 localStorage更安全，大量数据可以存储在本地，而不会影响网站的性能。 尽pipelocalStorage更现代化，但这两种技术都有一些优点和缺点。

cookies

优点

• 传统支持（它永远存在）
• 持久数据
• 到期date

缺点

• 每个域都将其所有cookie存储在一个string中，这可能会使parsing数据变得困难
• 数据是未encryption的，这成为一个问题，因为……虽然规模很小，但Cookie随每个HTTP请求一起发送。限制大小（4KB）
• SQL注入可以从cookie执行

本地存储

优点

• 支持大多数现代浏览器
• 持久数据直接存储在浏览器中
• 同源规则适用于本地存储数据
• 不会与每个HTTP请求一起发送
• 〜5MB的存储空间（5120KB）

缺点

• IE 8，Firefox 3.5，Safari 4，Chrome 4，Opera 10.5，iOS 2.0，Android 2.0以前不支持
• 如果服务器需要存储客户端信息，则有意将其发送。

localStorage使用情况与第一场会议几乎完全相同。 他们有非常确切的方法，所以从会话切换到localStorage真的是小孩子的玩法。 但是，如果存储的数据对您的应用程序非常重要，那么在localStorage不可用的情况下，您可能会使用cookie作为备份。 如果你想检查浏览器对localStorage支持，你所要做的就是运行这个简单的脚本：

 /* * function body that test if storage is available * returns true if localStorage is available and false if it's not */ function lsTest(){ var test = 'test'; try { localStorage.setItem(test, test); localStorage.removeItem(test); return true; } catch(e) { return false; } } /* * execute Test and run our custom script */ if(lsTest()) { // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar window.localStorage.setItem(name, 1); console.log('localStorage where used'); // log } else { document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC"; console.log('Cookie where used'); // log } 

“安全（SSL）页面上的localStorage值是孤立的”，因为有人注意到，如果您从“http”切换到“https”受保护的协议（即cookie仍然可访问），localStorage将不可用。 如果你使用安全的协议，这是重要的一点。

Answer 4

那么本地的存储速度很大程度上取决于客户端使用的浏览器以及操作系统。 Mac上的Chrome或Safari可能比PC上的Firefox快得多，特别是使用更新的API。 一如既往，testing是你的朋友（我找不到任何基准）。

我真的没有看到在本地存储与cookie的巨大差异。 另外，您应该更加担心兼容性问题：并非所有的浏览器甚至已经开始支持新的HTML5 API，因此，Cookie将是速度和兼容性的最佳select。

Answer 5

本地存储可以存储高达10MB的离线数据，而会话可以存储高达5 MB的数据。 但是Cookie只能以文本格式存储4kb的数据。