瀏覽器中如何操作Cookie？
關於Cookie的概念和應用，大家可以看看我前面的幾篇文章。並且在Cookie詳解這篇文章中，介紹瞭如何在服務器端和使用JavaScript創建Cookie，並設置屬性。
我們知道，Cookie是存儲在客戶端的，並且現在前後端分離慢慢變得流行起來，因此如何在瀏覽器上可以使用方便快捷的操作Cookie變得尤爲重要。使用原生JS操作方法在上篇文章中已經寫過，原生JS雖然更簡單，但是操作起來還是比較費力的，下面我們一起來看下更加簡單方便的幾種方法。
1.jQuery Cookie
jQuery Cookie是一個簡單、輕巧的jQuery插件，主要用於讀取，編寫和刪除cookie。因爲是主要是爲了增強jQuery的功能，因此對於許多之前用過jQuery的同學而言，其使用起來更加的方便。
要想使用jQuery Cookie，首先要在頁面上引入兩個JS文件，代碼如下：
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
下面我們來看下使用jQuery Cookie是如何操作Cookie的：
//創建一個Cookie，屬性默認
$.cookie('password', '123456');
//創建一個Cookie，設置屬性：有效天數，path
$.cookie('attribute', 'pathDomain', { expires: 7, path: '/' });
//讀取所有Cookie，返回{name1:value1,...,namen:valuen} JSON格式
$.cookie();
//獲取指定name的Cookie的值
$.cookie("password");
//修改Cookie，重新創建一遍，name相同會覆蓋之前Cookie，修改了過期時間
$.cookie('attribute', 'pathDomain', { expires: 14, path: '/' });
//刪除Cookie，可以指定過期時間爲當前時間；注意：因爲過期時間以瀏覽器的服務器時間爲準，一般會有八小時時差
$.removeCookie('password');
上面即是jQuery Cookie使用的示例代碼，我們將其在Chrome的控制檯中運行，執行過程如下圖所示：
我們來看下Application中的Cookie信息。
下面注意看咯，在控制檯中執行$.removeCookie('attribute');，返回的結果和剛纔執行$.removeCookie('password');怎麼不一樣了？
這裏大家需要注意，如果創建Cookie時，指定了Cookie的path和domain屬性，則刪除時，同樣需要傳入相同的參數。
2.js-cookie
js-cookie一個簡單、輕巧的處理Cookie的JavaScript的API。這麼看來其和jQuery Cookie相差似乎不大，兩個插件的體積也都不大，壓縮後都是1Kb左右，但是js-cookie的一個優勢就是不需要依賴jQuery，這樣我們在使用Vue等其他前端框架時可以更方便的使用。
除了上述，js-cookie官網上對其有點的介紹如下所述：
- 可以在所有瀏覽器上工作
- 支持任何字符
- 經過嚴格的測試
- 沒有任何依賴
- 支持ES模塊
- 支持AMD/CommonJS
- 實用的wiki文檔
- 支持自定義編碼/解碼
- 體量小
下面就讓我們一起來體驗下js-cookie，首先，在頁面上引入JS文件，代碼如下：
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
注：引入JS文件後，可以直接使用
之後我們就可以直接使用js-cookie提供的一個Cookie對象，其中提供了許多操作Cookie的方法：
//創建一個Cookie，屬性默認
Cookies.set('password', '123456');
//創建一個Cookie，設置屬性：有效天數，path
Cookies.set('attribute', 'pathDomain', { expires: 7, path: '/' })
//讀取所有Cookie，返回{name1:value1,...,namen:valuen} JSON格式
Cookies.get();
//獲取指定name的Cookie的值
Cookies.get("password");
//修改Cookie，重新創建一遍，name相同會覆蓋之前Cookie，修改了過期時間
Cookies.set('attribute', 'pathDomain', { expires: 14, path: '/' })
//刪除Cookie，可以指定過期時間爲當前時間；注意：因爲過期時間以瀏覽器的服務器時間爲準，一般會有八小時時差
Cookies.remove("password");
上面即是js-cookie使用的示例代碼，我們將其在Chrome的控制檯中運行，執行過程如下圖所示：
我們可以發現js-cookie中的API的使用和jQuery Cookie是非常類似的，參數列表基本一致，因此使用起來也是上手很快。
需要注意的是，這裏刪除Cookie時，同樣需要傳入Cookie創建時相同的參數。
js-cookie同樣支持模塊開發，有興趣可以執行查看文檔。
3.小結
本文介紹了jQuery Cookie、js-cookie的使用方法，兩者的使用非常類似，大家也可以根據自己的喜歡來選擇，無論哪種，都會比原生的js要方便。這裏還是比價推薦js-cookie，因爲其不要依賴別的JS，當然還有許多別的好處。
參考閱讀：
又到了分隔線以下，本文到此就結束了，本文內容全部都是由博主自己進行整理並結合自身的理解進行總結，如果有什麼錯誤，還請批評指正。
Java web這一專欄會是一個系列博客，喜歡的話可以持續關注，如果本文對你有所幫助，還請還請點贊、評論加關注。
有任何疑問，可以評論區留言。