本地存储与Cookie

时间 2019-12-18

标签本地存储 cookie 栏目 HTML 繁體版

原文原文链接

我想经过将全部cookie移到本地存储中来减小其加载时间，由于它们彷佛具备相同的功能。除了明显的兼容性问题之外，使用本地存储替换cookie功能是否有任何利弊（特别是性能方面的优点）？ html

#1楼

好吧，本地存储速度很大程度上取决于客户端使用的浏览器以及操做系统。 Mac上的Chrome或Safari可能比PC上的Firefox快得多，尤为是使用较新的API时。与往常同样，测试是您的朋友（我找不到任何基准）。 html5

我真的没有看到Cookie与本地存储的巨大差别。另外，您应该更加担忧兼容性问题：并非全部的浏览器都已经开始支持新的HTML5 API，所以cookie是提升速度和兼容性的最佳选择。 web

#2楼

Cookies和本地存储有不一样的用途。 Cookies主要用于读取服务器端 ，本地存储只能由客户端读取。所以，问题是，在您的应用程序中，谁须要此数据-客户端仍是服务器？浏览器

若是它是您的客户端（您的JavaScript），则必定要切换。经过在每一个HTTP标头中发送全部数据来浪费带宽。缓存

若是是您的服务器，则本地存储不是那么有用，由于您必须以某种方式（使用Ajax或隐藏的表单字段或其余方式）转发数据。若是服务器仅须要每一个请求的所有数据的一小部分，则能够这样作。安全

不管哪一种方式，您都但愿将会话cookie保留为cookie。 服务器

根据技术差别以及个人理解： cookie

除了做为一种古老的数据保存方式以外，Cookie还为您提供了4096个字节的限制（实际上为4095 个字节），即每一个cookie的限制。 每一个域的本地存储最大为5MB - SO Question也提到了它网络
localStorage是Storage接口的实现。它存储没有到期日期的数据，而且仅经过JavaScript或清除浏览器缓存/本地存储的数据来清除-与cookie到期不一样。 session

#3楼

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

饼干

优势

旧版支持（一直存在）
持续数据
到期日期

缺点

每一个域都将其全部cookie存储在单个字符串中，这可能会使解析数据变得困难
数据未加密，这成为一个问题，由于... ...尽管大小很小，但每一个HTTP请求都会发送cookie限制大小（4KB）
能够从cookie执行SQL注入

本地存储

优势

大多数现代浏览器的支持
永久性数据直接存储在浏览器中
同源规则适用于本地存储数据
并不是与每一个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将不可用。若是您使用安全协议，请务必注意这一点。

#4楼

在JWT的上下文中 ，Stormpath写了一篇至关有帮助的文章，概述了存储它们的可能方法以及与每种方法有关的（缺点）优势。

它还简要概述了XSS和CSRF攻击，以及如何应对它们。

我在下面附上了一些简短的摘录，以防他们的文章脱机/其站点出现故障。

本地存储

问题：

Web存储（localStorage / sessionStorage）可经过同一域上的JavaScript访问。这意味着您网站上运行的全部JavaScript均可以访问Web存储，所以，它很容易受到跨站点脚本（XSS）攻击的攻击。简而言之，XSS是攻击者能够注入将在您的页面上运行的JavaScript的一种漏洞。基本的XSS攻击会尝试经过表单输入注入JavaScript，攻击者会在其中输入警报（“您被黑”）；转换为表单，以查看它是否由浏览器运行而且能够被其余用户查看。

预防：

为了防止XSS，常见的响应是对全部不受信任的数据进行转义和编码。可是，这还远没有完整。 2015年，现代网络应用使用托管在CDN或外部基础架构上的JavaScript。现代网络应用程序包括用于A / B测试，渠道/市场分析和广告的第三方JavaScript库。咱们使用Bower等软件包管理器将其余人的代码导入咱们的应用程序。

若是只破坏了您使用的一个脚本怎么办？恶意JavaScript能够嵌入到页面中，而且Web存储受到损害。这些类型的XSS攻击可能会致使全部人在不知情的状况下访问您站点的Web存储。这可能就是为何许多组织建议不要在网络存储中存储任何有价值的东西或信任任何信息的缘由。这包括会话标识符和令牌。

做为一种存储机制，Web存储在传输期间不会强制执行任何安全标准。读取并使用Web存储的任何人都必须进行尽职调查，以确保他们始终经过HTTPS发送JWT，而不经过HTTP发送JWT。

饼干

问题：

与HttpOnly cookie标志一块儿使用时，cookie没法经过JavaScript访问，而且不受XSS的影响。您还能够设置安全cookie标志，以确保仅经过HTTPS发送cookie。这是过去曾利用Cookie存储令牌或会话数据的主要缘由之一。现代开发人员不肯使用Cookie，由于传统上他们要求将状态存储在服务器上，从而破坏了RESTful最佳实践。若是将JWT存储在cookie中，则cookie做为一种存储机制不须要在服务器上存储状态。这是由于JWT封装了服务器处理请求所需的全部内容。

可是，cookie容易受到其余类型的攻击：跨站点请求伪造（CSRF）。 CSRF攻击是一种攻击，当恶意网站，电子邮件或博客致使用户的Web浏览器在当前已对其进行身份验证的受信任站点上执行有害操做时，会发生这种攻击。这是对浏览器如何处理Cookie的一种利用。 Cookie只能发送到容许它的域。默认状况下，这是最初设置cookie的域。不管您是在galaxies.com仍是hahagonnahackyou.com上，都会发送Cookie进行请求。

预防：

能够经过使用同步令牌模式来防止CSRF。这听起来很复杂，可是全部现代Web框架都对此提供支持。

例如，AngularJS提供了一种解决方案来验证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": "tom@andromeda.com", "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e" }
利用Web应用程序框架的CSRF保护，cookie能够坚固地存储JWT。经过检查API中的HTTP Referer和Origin标头，也能够部分阻止CSRF。 CSRF攻击将具备与您的应用程序无关的Referer和Origin头。

完整的文章能够在这里找到： https : //stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

关于令牌自己的结构，他们还提供了有关如何最佳设计和实现JWT的有用文章： https ://stormpath.com/blog/jwt-the-right-way/

#5楼

本地存储最多可存储5mb的脱机数据，而会话也最多可存储5mb的数据。可是Cookie只能以文本格式存储4kb数据。

LOCA1和Session以JSON格式存储数据，所以易于解析。可是Cookies数据是字符串格式。