tim学习记录

Local Storage 与 Cookies 的区别

原文地址：Local Storage vs Cookies: What's the Difference?open in new window

Cookies 在 JavaScript 中用来读取和储存用户在浏览器上的小量数据。

Local Storage 也允许你通过 JavaScript 的 Storage APIopen in new window 来读取和储存用户在浏览器上的数据。

通过这篇文章，你将会学到 localstorage 和 cookies 之间的一些主要的区别，同时我们应该如何选择它们。

什么是 Cookies？

Cookies 是一些在服务器和浏览器之间，通过请求头传递的数据。它让服务器获取到你访问网站的一些信息，同时让你可以访问和操作网站上的一些数据。

一个例子就是当用户登录的时候，用 cookies 去保存用户验证 token。在后面的请求中，服务器需要访问 cookies 以便验证用户同时返回数据或者通过用户身份做一些处理操作。

同样的，作为开发者，你需要访问到 token 用于后面发送请求时传给服务器。

在客户端（浏览器），我们可以用原生方式 document.cookies 来存取 cookies。当你在浏览器上储存 cookies 时，你可以让他们储存在特定的域名和设置有效期。

什么是 Local Storage？

Local Storage 通过浏览器本地储存空间进行读写数据。这些储存的数据是持久存在的且没有过期日期。数据通过键值对的方式储存。服务器无法访问到客户端的本地仓库（localstorage）。

一个使用 localstorage 的例子是用户的颜色偏好模式（白昼或者暗夜模式）。这个信息确保网站能正确显示用户偏好，而一般这个信息不需要让服务器知道。

Local Storage 针对域名协议，所以 http 和 https 协议的 localstorage 数据不同。

Local Storage 的存储通过 window.localstorage，它是一个只读的属性，通过例如 getItem 和 setItem 来修改和访问或者新增数据到本地仓库。

Local Storage 和 Cookies 之间有什么不同呢？

通过服务器存取

就像上面提到过的，服务器可以访问存取客户端的 cookies 但没办法访问存取客户端的本地仓库。

存储数据大小

Local Storage 和 cookies 在存储数据大小方面有巨大的不同。对 cookies 来说，最大的数据量是 4096 bytes，然而 local storage 可以有5MB。

所以，cookies 不应该用来存储大量数据。举例来说，如果你想在浏览器缓存储存用户的详情数据，那你最好选择用 local storage。

数据有效期

Cookies 具有过期日期，你可以设置一个超远的过期日期，但它还是会过期。另一方面，数据在 local storage 中不会过期，任何时候用户打开你的网站，都可以使用local storage 中的数据。除非用户手动清理了浏览器缓存，或者代码手动清理了 local storage 数据。

更好的 API

除非你使用 JavaScript 的工具库，不然使用 document.cookies 读写数据还是比较麻烦的，没有比较直观的方式。这里有一个 W3Schoolsopen in new window 的例子，通过 name 设置和获取 cookies：

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

至于 local storage，它通过执行 Web Storage API 包含的一些简单易用的方法来读取和存储数据。这里有个例子，如何设置数据和读取数据：

localStorage.setItem('name', 'Shahed');

//later
const name = localStorage.getItem('name');

1
2
3
4

应该如何选择？

通过以上的定义和区别这应该很清晰了。不过，为了让它更清晰，我们总结一下：

如果你需要在服务器和客户端都能存取数据，使用 cookies。其他情况，使用 local storage。
如果你需要存储大量数据，用 local storage。
如果你需要存储不过期的数据，用 local storage。
如果你需要在客户端用更加便捷的方式去操作缓存数据，用 local storage。

结尾

如果你有兴趣学习更多关于 cookies 和 local storage 的知识，可以通过MDN 的文档 cookiesopen in new window 和 localStorageopen in new window 来深入理解他们。

# Local Storage 与 Cookies 的区别

# 什么是 Cookies？

# 什么是 Local Storage？

# Local Storage 和 Cookies 之间有什么不同呢？

# 通过服务器存取

# 存储数据大小

# 数据有效期

# 更好的 API

# 应该如何选择？

# 结尾