前端存储分为cookie和webStorage，webStorage又分为sessionStorage（会话存储）和localStorage（本地存储）。

 ♡ ‧₊˚cookie ‧₊˚ ♡

特点：cookie产生于服务器端，保存在客户端，同一服务器下的cookie是共享的，不同服务器下cookie不会共享，传输数据的大小限制为4kb。

我们可以通过js来产生cookie，通常通过js-cookie这个库来操作cookie

    <!-- 用js-cookie库操作 -->
    <!-- 从bootcdn里引入js-cookie库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.1/js.cookie.js"></script>

cookie的方法：

设置cookie参数：

set(属性名，属性值，{expires:有效时间})

        // 设置cookie参数，设置过期时间expires为七天
        Cookies.set('color','orange', {expires:7})

获取cookie：

get('键名/属性名')

 // 获取cookie get参数：键名/属性名
       
 console.log(Cookies.get('color'));

右击编辑器，选择 Open with Live Server

 在内存-->存储-->Cookie中可以查看：

移除cookie：

remove('属性名')

remove之后再次打开，刚刚获取到的内容就没了。

        Cookies.remove('color');

验证一下不同服务器下cookie不会共享：

再次右击编辑器，这次选择Open In Default Browser 

 找到Cookie，会发现什么都没有了：

 ♡ ‧₊˚sessionstorage ‧₊˚ ♡

sessionstorage（会话存储）是针对于选项卡的，若选项卡或者浏览器关闭会话立即失效，传输的数据可以达到5Mb；

sessionStorage的方法

设置会话存储：setItem(key,value)

       // 设置会话存储
        sessionStorage.setItem('name', '蜡笔小新');
        sessionStorage.setItem('age', 5);

获取会话存储：getItem(key)

        // 获取会话存储
        console.log(sessionStorage.getItem('name'));
        console.log(sessionStorage.getItem('age'));

清除部分会话存储：remove(key)

     // 清除会话存储，参数是需要移除的会话存储
        sessionStorage.removeItem('name');

清除全部会话存储：clear() -- 无参数

        // 清除全部会话存储，不需要参数
        sessionStorage.clear()

 ♡ ‧₊˚slocalStorage ‧₊˚ ♡

localStorage（本地存储）是将数据存放在本地磁盘中，即使选项卡或者浏览器关闭，数据依旧存在，除非手动删除，否则数据一直存在本地磁盘中，传输的数据5M甚至更大。

localStorage（本地存储）的方法与sessionStorage（会话存储）的四种方法是一样的。

不再一一赘述。

       // 设置本地存储
        localStorage.setItem('name','小帕');
        localStorage.setItem('age',12);
        // 获取本地存储
        console.log(localStorage.getItem('age'));
        console.log(localStorage.getItem('name'));
        // 移除本地存储
        localStorage.removeItem('name');
        // 移除全部本地存储
        localStorage.clear();