$.cookie()

Cookie

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

CDN

相關連結 : https://cdnjs.com/libraries/jquery-cookie

<!--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

使用版面

注意：使用Cookie 不能將 使用者帳號及密碼放在此地方，需要讀者自行判斷

創建Cookie

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

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

時效Cookie

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

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

讀取Cookie

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

刪除Cookie

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

檢查Cookie

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

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

範例-簡易登入訊息

    $.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');
        }
    })
PreviousjQuery 簡介Next.animate

Last updated

Was this helpful?