今天我们来聊聊前端的存储考点，cookie和localStorage,属于是很常见的考点了，今天我们就将他们拿下吧！

localStorage是什么

localStorage是HTML5引入的一种Web存储（Web Storage）API的一部分，它是一个对象，可以在用户的浏览器中持久化存储数据。以下是localStorage的一些特点优势：

存储量大：localStorage提供的存储空间比传统的cookies大得多，一般约为5MB，具体取决于浏览器。
数据持久性：存储在localStorage中的数据会一直保留，直到用户或网站代码明确地将其删除。这与sessionStorage不同，后者在浏览器会话结束时会清除数据。
数据不随请求发送：与cookies不一样的是，localStorage中的数据不会随着每个HTTP请求发送到服务器，这有助于减少网络流量并提高性能。
操作简单：localStorage通过简单的键值对进行操作。

以下是一些基本的localStorage操作：

设置数据：
```
localStorage.setItem('key', 'value');
```

获取数据：

var value = localStorage.getItem('key');

删除数据：
```
localStorage.removeItem('key');
```
清空所有数据：
```
localStorage.clear();
```
在浏览器内找到存储的地方：

cookie是什么

cookie其实就更简单了，它在某域名内，存储在浏览器空间中的一段字符串，格式为 key=value;expires=;key2=value;expires=;...等，可以被http请求带来带去，吃不了还得兜着走的那种感觉。以下是cookie的一些基本特点：

存储量小: cookie只负责存储关键数据，比如用于验证用户信息等，大多数浏览器限制单个Cookie的大小为大约4KB（4096字节）。
数据持久性: 这个是靠你程序决定，一直都在，到了设置的过期时间才会消失。
数据随请求发送: 正是因为它的存储量小，且为关键数据，每次http请求都会带上cookie 弥补http无状态问题，因为每次http请求都会带上，所以要克制存储较大内容，不然会影响http性能。

在js内，我们可以这样对cookie进行操作，为了代码的复用性，选择封装一个类作为对cookie处理的对象。

class CookieManager{
    constructor() {
    }
    // es6 函数参数默认值
    setCookie(name,value,expires=7) {
        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=/"
    }
    getCookie() {
        return document.cookie;
    }
    deleteCookie(name) {
        this.setCookie(name,"", -1)
    }
}

setCookie函数的第三个参数默认值为7，当调用函数且未传递第三个参数时启用，如果传递了第三个参数，则使用你传递的值，这是ES6函数参数默认值的特性。

这个赋值则是使用了ES6的字符串模板拼接，date.toUTCString()是JavaScript中的一个内置函数，用于将Date对象转换为UTC（协调世界时）格式的字符串。例如，如果日期是2021年2月25日星期四的14:30:00，那么toUTCString()函数将返回"Thu, 25 Feb 2021 14:30:00 GMT"。

而这个则是给cookie设置它的固定格式，它主要包含name、value、domain(指的是cookie所在的域名)，path路径给的是全局路径，也就是该域名下所有的页面都可以访问到。

获取cookie的话，我们只是简单的了解一下，不具体展开，只返回全部的cookie字符串。
删除cookie，我们就将要删除的cookie的name传入，然后将该cookie的过期时间设置为-1，使得一调用，这个cookie就过期，即达到删除的目的。

浏览器里藏了曲奇饼？你吃到了没——cookie和localStorage

localStorage是什么

cookie是什么