关键的不同点:

容量:

本地存储:10MB 饼干:4 kb

浏览器支持:

本地存储:HTML5 Cookies: HTML4, HTML5

存储位置:

本地存储:仅限浏览器 cookie:浏览器和服务器

随请求发送:

本地存储:是 饼干:不

访问:

本地存储:任何窗口 Cookies:任何窗口。

到期日期:

本地存储:永不过期，直到javascript完成。 cookie:有，有有效期。

注意:使用它，适合你的。

本地存储最多可以存储5mb的离线数据，而会话也可以存储5mb的数据。但是cookie只能以文本格式存储4kb的数据。

LOCAl和Session存储数据为JSON格式，因此易于解析。但是cookie数据是字符串格式。

使用localStorage, web应用程序可以在用户的浏览器中本地存储数据。在HTML5出现之前，应用程序数据必须存储在cookie中，包含在每个服务器请求中。大量数据可以存储在本地，不影响网站性能。虽然localStorage更现代，但这两种技术都有一些优点和缺点。

饼干

Pros

遗留支持(它一直存在) 持久数据 到期日期 cookie可以被标记为仅HTTPOnly，这可能会限制用户浏览器在会话期间的XSS攻击(不保证对XSS攻击完全免疫)。

Cons

每个域将其所有cookie存储在单个字符串中，这可以使 解析数据困难 数据未加密，这成为一个问题，因为... ...虽然 小的大小，cookie发送与每个HTTP请求限制大小 (4 kb)

本地存储

Pros

大多数现代浏览器支持 直接存储在浏览器中的持久数据 同源规则适用于本地存储数据 不是每个HTTP请求都发送吗 每个域约5MB的存储空间(即5120KB)

Cons

之前的任何版本都不支持:IE 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOS 2.0, Android 2.0 如果服务器需要存储的客户端信息 发送它。

localStorage的使用几乎与会话的使用相同。它们有非常精确的方法，所以从session切换到localStorage真的很简单。但是，如果存储的数据对您的应用程序非常重要，您可能会使用cookie作为备份，以防localStorage不可用。如果你想检查浏览器对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值是隔离的" 有人注意到，请记住localStorage将不会 可用，如果你从'http'切换到'https'安全协议，其中 cookie仍然可以访问。这很重要 如果您使用安全协议，请注意。

关键的不同点:

容量:

本地存储:10MB 饼干:4 kb

浏览器支持:

本地存储:HTML5 Cookies: HTML4, HTML5

存储位置:

本地存储:仅限浏览器 cookie:浏览器和服务器

随请求发送:

本地存储:是 饼干:不

访问:

本地存储:任何窗口 Cookies:任何窗口。

到期日期:

本地存储:永不过期，直到javascript完成。 cookie:有，有有效期。

注意:使用它，适合你的。

饼干：

在HTML5之前介绍。 有有效期。 通过JS或浏览器的“清除浏览数据”或过期日期清除。 将每个请求发送到服务器。 容量为4KB。 只有字符串可以存储在cookie中。 有两种类型的cookie:持久cookie和会话cookie。

本地存储:

由HTML5引入。 没有过期日期。 由JS或浏览器的“清除浏览数据”清除。 您可以选择何时必须将数据发送到服务器。 容量为5MB。 数据是无限存储的，必须是字符串。 只有一种。

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

如果它是你的客户端(JavaScript)，那么无论如何都要切换。在每个HTTP报头中发送所有数据是在浪费带宽。

如果它是您的服务器，本地存储就不是那么有用了，因为您必须以某种方式(使用Ajax或隐藏表单字段或其他东西)转发数据。如果服务器对每个请求只需要总数据的一小部分，那么这样做是可以的。

不管怎样，您都希望将会话cookie保留为cookie。

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

除了作为一种古老的保存数据的方式，cookie给你一个4096字节的限制(实际上是4095字节)-这是每个cookie。本地存储每个域高达10MB -这个堆栈溢出问题也提到了它。 localStorage是存储接口的实现。它存储的数据没有过期日期，只通过JavaScript或清除浏览器缓存/本地存储的数据-不像cookie过期。