Local Storage vs Cookies

Local Storage vs Cookies

技术背景

在前端开发中，数据存储是一个常见需求。Cookies 和 Local Storage 是两种不同的数据存储方式。Cookies 是一种古老的存储方式，主要用于服务器端读取数据；而 Local Storage 是 HTML5 引入的新特性，只能由客户端（JavaScript）读取。了解它们的特点和适用场景，有助于开发者选择合适的存储方式。

实现步骤

检查 Local Storage 支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 
* 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
}

使用 Local Storage

1
2
3
4
5
6
7
8
9
10
11
// 设置数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

使用 Cookies

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 设置 Cookie
document.cookie = "name=value; expires=Mon, 28 Mar 2026 12:00:00 UTC; path=/";

// 获取 Cookie
function getCookie(name) {
    var cookies = document.cookie.split('; ');
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].split('=');
        if (cookie[0] === name) {
            return cookie[1];
        }
    }
    return null;
}

var value = getCookie('name');

// 删除 Cookie
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

核心代码

上述代码中已经展示了 Local Storage 和 Cookies 的基本使用方法，包括设置、获取和删除数据。

最佳实践

  • 使用场景选择：
    • 如果数据仅需客户端使用，建议使用 Local Storage，避免在每个 HTTP 请求中发送数据，浪费带宽。
    • 如果服务器需要数据，可使用 Cookies，但要注意其大小限制和安全性问题。
    • 对于敏感数据，建议使用 Cookies，并设置 HttpOnly 和 Secure 标志；对于非敏感数据，可使用 Local Storage。
  • 安全性考虑：
    • 为防止 XSS 攻击，对 Local Storage 要谨慎处理，避免存储敏感信息；对 Cookies 设置 HttpOnly 标志。
    • 为防止 CSRF 攻击，对 Cookies 设置 SameSite 标志；对于不支持 SameSite 的浏览器，可使用同步令牌模式。

常见问题

存储容量问题

  • Local Storage：每个域名通常有 5MB 左右的存储容量。
  • Cookies：每个 Cookie 最大容量为 4KB 左右。

浏览器兼容性问题

  • Local Storage：不支持 IE 8 及以下、Firefox 3.5 及以下、Safari 4 及以下、Chrome 4 及以下、Opera 10.5 及以下、iOS 2.0 及以下、Android 2.0 及以下的浏览器。
  • Cookies：所有主流浏览器都支持。

安全性问题

  • Local Storage：易受 XSS 攻击，且难以简单防范。
  • Cookies：易受 XSS 和 CSRF 攻击，但可通过设置标志进行防范。

有效期问题

  • Local Storage：数据无过期日期，除非通过 JavaScript 或清除浏览器缓存删除。
  • Cookies：可设置过期日期，过期后自动删除。

协议切换问题

在从 http 切换到 https 安全协议时，Local Storage 可能不可用，而 Cookies 仍可访问。

隐私模式问题

在某些版本的移动 Safari 隐私模式下，无法使用 Local Storage。