Html 本地存储与cookie

我想通过将所有cookie移动到本地存储来减少网站的加载时间，因为它们似乎具有相同的功能。除了明显的兼容性问题外，使用本地存储替代cookie功能是否有任何优点/缺点（尤其是性能方面的优点/缺点）？

嗯，本地存储速度在很大程度上取决于客户端使用的浏览器以及操作系统。mac上的Chrome或Safari可能比PC上的Firefox快得多，尤其是在使用较新的API时。和往常一样，测试是你的朋友（我找不到任何基准测试）

---

我真的看不出cookie和本地存储之间有多大区别。此外，您还应该更加担心兼容性问题：并非所有浏览器都已经开始支持新的HTML5API，因此Cookie将是速度和兼容性的最佳选择。

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

如果是您的客户机（您的JavaScript），那么请务必切换。发送每个HTTP头中的所有数据是在浪费带宽

如果是您的服务器，本地存储就没那么有用了，因为您必须以某种方式转发数据（使用Ajax或隐藏表单字段或其他方式）。如果服务器只需要每个请求的总数据的一小部分，那么这可能没问题

无论如何，您都希望将会话cookie作为cookie保留。

根据技术差异，以及我的理解：

除了作为一种旧的数据保存方式外，cookie还为您提供了4096字节（实际上是4095字节）的限制—这是每个cookie的限制。每个域的本地存储容量高达5MB-也提到了它

localStorage

是

Storage

接口的实现。它存储的数据没有过期日期，并且只通过JavaScript清除，，或者清除浏览器缓存/本地存储的数据-与cookie过期不同

---

使用

localStorage

，web应用程序可以在用户浏览器中本地存储数据。在HTML5之前，应用程序数据必须存储在cookie中，包括在每个服务器请求中。大量数据可以存储在本地，而不会影响网站性能。虽然

localStorage

更为现代，但这两种技术都有一些优点和缺点

曲奇饼 专业人士

• 遗留支持（它已经存在了很久）
• 持久数据
• 有效期

缺点

• 每个域将其所有cookie存储在一个字符串中，该字符串可以 解析数据很困难
• 数据未加密，这成为一个问题，因为。。。虽然 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

的使用与会话1几乎相同。它们有非常精确的方法，所以从会话切换到

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”安全协议时可用，其中 曲奇仍然可以访问。这对我来说有点重要 请注意是否使用安全协议

---

在JWTs的上下文中，Stormpath写了一篇相当有用的文章，概述了存储它们的可能方法，以及每种方法的优点

本书还简要介绍了XSS和CSRF攻击，以及如何应对它们

我在下面附上了这篇文章的一些简短片段，以防他们的文章离线/他们的网站宕机

本地存储 问题：

Web存储（localStorage/sessionStorage）可通过同一域上的JavaScript访问。这意味着在您的站点上运行的任何JavaScript都可以访问web存储，因此很容易受到跨站点脚本（XSS）攻击。简而言之，XSS是一种漏洞类型，攻击者可以在其中注入将在您的页面上运行的JavaScript。基本XSS攻击试图通过表单输入注入JavaScript，攻击者在表单输入中发出警报（“您被黑客攻击”）；查看是否由浏览器运行，以及其他用户是否可以查看

预防：

为了防止XSS，常见的响应是对所有不可信数据进行转义和编码。但这还远远不是全部。2015年，现代web应用程序使用托管在CDN或外部基础设施上的JavaScript。现代web应用程序包括用于A/B测试、漏斗/市场分析和广告的第三方JavaScript库。我们使用包管理器（如Bower）将其他人的代码导入到我们的应用程序中

如果您使用的脚本中只有一个被破坏了怎么办？恶意的 JavaScript可以嵌入到页面上，并且Web存储是 通用域名格式

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