# $.cookie()

## Cookie

瀏覽器 (browser) 的 cookie 可以用來儲存一些使用者的連線資料，例如儲存使用者登入狀態的 session 資料。cookie 會一直儲存在使用者的瀏覽器中，直到你指定的失效日期為止，不論 server 端或使用者 (瀏覽器) 端都可以讀取和寫入 cookie 資料。

## CDN

相關連結 : [https://cdnjs.com/libraries/jquery-cookie](https://cdnjs.com/libraries/jquery-cookie)

```markup
<!--cookie-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" 
integrity="sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==" 
crossorigin="anonymous"></script>
<!--jQuery-->
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
```

## 使用方式

參考教學:[https://www.runoob.com/jquery/jquery-cookie-plugin.html](https://www.runoob.com/jquery/jquery-cookie-plugin.html)

![使用版面](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MKncCZxOz3UqZxNpj-W%2F-MKncTgOVzC0TWttbvi5%2Fimage.png?alt=media\&token=21859118-1c12-4000-89a7-4599a0f0e0d7)

{% hint style="info" %}
注意：使用Cookie 不能將 使用者帳號及密碼放在此地方，需要讀者自行判斷
{% endhint %}

### 創建Cookie

```javascript
$.cookie('CookieName','CookieValue');
```

如同上方意思，使用方式先取cookie的名稱在設定此名稱的值。\
EX: `$.cookie('name', '123');//在此cookie的name為123`&#x20;

### 時效Cookie

```javascript
$.cookie('name', 'value', { expires: 10 });
```

假設要設定10天候失效，就需要外加個 `{expires: 10} 。`

### 讀取Cookie

```javascript
$.cookie('CookieName');/*讀取CookieName的內容*/
$.cookie();/*讀取全部的Cookies的訊息*/
```

### 刪除Cookie

```
$.removeCookie('CookieName')/*刪除CookieName的訊息*/
```

### 檢查Cookie

最後，確認Cookie的值變成怎樣的方式有很多，以下提供參考:

可以使用F12檢查裡面的Cookie值，若沒出現可能需要使用 `ctrl+F5` 使否是載入畫面的問題。

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MKniJ9P4k0fP5YBaZxA%2F-MKniOXqXeti8SEJxFZr%2Fimage.png?alt=media\&token=3a38fd42-b6aa-46c8-8c27-4349c1a6ac66)

### 範例-簡易登入訊息

```javascript
    $.cookie('userName','admin');
    $.cookie('userPwd','0000');
    $('input[type="submit"]').on('click',function(){
        if($('#usr_password').val()==$.cookie('userPwd') && 
        $('#usr_code').val()==$.cookie('userName')){
            alert('Welcome');
            $.removeCookie('userName');
            $.removeCookie('userPwd');
        }
    })
```
