前言

一提到存储数据我们第一时间想到的一般是MySQL、HBase这类数据库，但其实浏览器也拥有自己的“小数据库”，能够存储一些关键数据。本文将介绍的两个“小数据库”分别是Cookie和localStorage。

我们可以在浏览器页面的检查中的应用里找到它们。

前端存储技术详解：Cookie vs localStorage

在前端开发中，数据的存储可以让用户的数据持久化，还能够提升网页的性能和安全性。Cookie和localStorage是两种关键的前端存储技术，它们各自有各自的使用场景，下文将举出恰当的例子供大家更好理解。

Cookie：HTTP的忠实伴侣

定义：Cookie是服务器在本地终端（通常是浏览器）上存储的小段数据，由服务器产生，发送给User-Agent（浏览器等），浏览器会将Cookie的key/value存储到某个目录下的文本文件内，在下次浏览器发请求时，Cookie会自动发送给服务器。

用途：

身份认证：Cookie最常用于用户登录状态的保持，即记住用户的身份，避免用户每次访问网站都需重新登录。
个性化设置：存储用户的偏好设置，如语言选择、主题风格等，提供个性化的用户体验。

我们可以看到 Expires栏目下显示的是时间，这就是这个数据的到期时间，比如其中一个是我们的登录信息，那么当过了这个时间我们再打开这个网站就需要重新登录了。

特点：

大小限制：每个域名的Cookie总大小有限制，一般不超过4KB。
自动携带：每次HTTP请求都会自动携带相关域名的Cookie，这可能会增加网络传输负担。
安全性：可以通过设置HttpOnly属性来防止JavaScript脚本读取Cookie，提高安全性。

localStorage：现代浏览器的宠儿

定义：localStorage是HTML5引入的一种本地存储方式，允许在用户浏览器中存储更大的数据量（通常为5MB左右），并且数据是持久的，除非用户主动清除或程序删除。

用途：

离线存储：存储用户数据，如购物车商品、未完成的表单数据，以便用户在离线状态下仍能访问。
缓存数据：缓存静态资源或动态生成的数据，减少服务器请求，提高应用性能。

显而易见，这栏存的是我的搜索记录。

特点：

大容量：相比Cookie，localStorage提供的存储空间更大，更适合存储较大体积的数据。
API友好：使用JavaScript API进行数据的读写，如setItem, getItem等，操作简单直观。
不随请求发送：localStorage中的数据不会自动随HTTP请求发送给服务器，减轻网络传输负担。

为什么Cookie小，localStorage大？

性能考量：由于Cookie会随每个HTTP请求发送，如果容量过大，会显著增加网络流量，影响性能。因此，Cookie的设计初衷是为了存储关键、少量的信息。
历史与兼容性：Cookie技术出现较早，为了适应早期网络环境，其设计较为保守；而localStorage作为HTML5的一部分，从设计之初就考虑到了现代网络的需求和挑战。

实战运用

localStorage

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');
console.log(value); // 输出：value

通过setItem添加或者设定key、value值，getItem获取。

Cookie

const cookieHandler = new CookieManager();
cookieHandler.setCookie('username','omg',30)
class CookieManager {
    constructor() { }
    setCookie(name, value, expires) {
        let expiresDate = '';
        if (expires) {
            const date = new Date();  // 当前时间
            date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000)
            expiresDate = `;expires=${date.toUTCString()}`;
        }
        document.cookie = name + "=" + value + expiresDate + ";path=/"
    }
    deleteCookie(name) {
        this.setCookie(name,"",-1)
    }
}

建立一个CookieManager类，其中包含修改添加Cookie以及删除Cookie。

结语

Cookie和localStorage各有千秋，选择哪种存储方式取决于具体的应用场景和需求。在需要频繁与服务器交互、涉及用户身份认证的场景下，Cookie是更佳的选择。而在存储大量非敏感数据、追求高性能和良好用户体验的场景下，localStorage则更为合适。

原来浏览器也有属于自己的“小数据库”

前言