jquery.cookie.js用法詳細解析

weixin_34007291發表於2017-11-06

最近專案需要做網站，所以我一個後臺也要負責要前端，所以最近最幾篇文章就講下我最近專案用到第三方js元件吧。

Cookie是由伺服器端生成，傳送給User-Agent（一般是瀏覽器），瀏覽器會將Cookie的key/value儲存到某個目錄下的文字檔案內，下次請求同一網站時就傳送該Cookie給伺服器（前提是瀏覽器設定為啟用cookie）。

例如購物網站儲存使用者曾經瀏覽過的產品列表，或者入口網站記住使用者喜歡選擇瀏覽哪類新聞。在使用者允許的情況下，還可以儲存使用者的登入資訊，使得使用者在訪問網站時不必每次都鍵入這些資訊？

cookie的話其實用js也可以操作，但是為了方便，我們直接用個cookie的外掛--jQuery.Cookie.js，是一個輕量級的Cookie管理外掛。
我們可以直接用它的CDN加速下載地址，也稍微減輕下伺服器壓力吧。在http://www.bootcdn.cn/jquery-cookie/可以尋找各個版本的jquery-cookie的cdn地址。
我們直接就用最新版的吧。因為前後端沒分離，所以用的是模板引擎freemarker。
在需要使用cookie的頁面ftl新增這行程式碼引入js。

<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

如果是硬碟裡某個靜態的html檔案引入jquery——cookie其實也不能使用cookie。
必須要部署到伺服器才能跑,才能設定cookie。

為了實現某些功能，把一些資料儲存到使用者的本地計算機。
注意事項：同源
    1）必須是服務環境
    2）不安全 ， 因為它存在了使用者的本地機器上（臨時儲存）
    3）過期時間：
        預設：  session ——  會話時間（會話結束、瀏覽器關閉，cookie消失）
    4）大小、容量 一般 4K  左右，有的瀏覽器還有條數的限制
        —— 珍貴的資源
    5）不管看到的是什麼，值都是String型別

使用方法

1.新新增一個會話 cookie：

$.cookie('the_cookie', 'the_value');

當沒有指明 cookie有效時間時，所建立的cookie有效期預設到使用者關閉瀏覽器為止

2.建立一個cookie並設定有效時間為 10天：

$.cookie('the_cookie', 'the_value', { expires: 10 });

3.建立一個cookie並設定 cookie的有效路徑：

$.cookie('the_cookie', 'the_value', { expires: 10, path: '/' });

在預設情況下，只有設定 cookie的網頁才能讀取該 cookie。如果想讓一個頁面讀取另一個頁面設

置的cookie，必須設定cookie的路徑。cookie的路徑用於設定能夠讀取 cookie的頂級目錄。將這

個路徑設定為網站的根目錄，可以讓所有網頁都能互相讀取 cookie （一般不要這樣設定，防止出現衝突）。

關於cookie的path設定需要注意，如果不設定path:'/'的話，path則會根據目錄自動設定[如:http://www.xxx.com/user/,path會被設定為 '/user']

4.讀取cookie：

$.cookie('the_cookie'); // cookie存在 => 'the_value' 

$.cookie('not_existing'); // cookie不存在 => null

6.修改一個cookie 的值

設定方法一樣：  
    $.cookie('name','新的value',{
        path: //  如果當前程式的path和cookie的path不一致，那麼這裡一定要指定path引數
    });

6.刪除cookie，通過傳遞null作為cookie的值即可：
這種刪除方式的話，如果到時用$.cookie('the_cookie');獲取的是“null”的字串，如果後臺使用@CookieValue獲取cookie，那麼獲取的cookie的值為“null”的字串,這個“null”字串後臺處理要特別注意