前端中怎樣設定cookie

這次帶給大家前端中怎麼設定cookie，前端中設定cookie的注意事項有哪些，以下就是實戰案例，一起來看一下。

cookie

是什麼：是一種用來在客戶端硬碟上儲存資訊的手段。

為什麼要用？ ：可以用來儲存一些訊息，實現一些特殊的效果。例如實現多少天內免登陸，或儲存一些小資料。

cookie中的一些欄位意義：

1. key=value（鍵=值） 是cookie的一個鍵值對，一般是根據key拿到對應的value

2. expires（過期時間）設定該cookie的過期時間，也是用';' 來隔開，expires=GMT的時間字串，例如要30天免登陸，就可以設定過期時間為今天開始的30天之後的日期。如果不設定過期時間，預設瀏覽器關閉該cookie就消失了。

3. path（路徑） cookie並不是在哪裡都能夠取得的。在網站中分成許多目錄，可能很多目錄中不需要使用到cookie，所以可以設定cookie的路徑，這樣比較安全，避免任意目錄都能存取到該cookie。透過path=/E:javascript/test 這樣只能在該目錄下才能取得到該cookie

4. domain（網域）預設該cookie在該cookie所在網域下才能夠存取到，但有時候a.chaijinsong.com需要存取b.chaijinsong.com下的cookie，這時候就需要設定domain=chaijinsong.com。這樣兩個子網域都可以存取該cookie

5. secure（安全性） 預設secure是為false的，即透過http協定來傳輸，但是如果secure=true 的話，就只能t透過https來進行傳輸

怎麼用？ ：

document.cookie; //获取cookie
"aaa=aaa;bbb=bbb" //类似于这种格式，但是并不是字符串。
//设置cookie,也可以用来进行删除cookie，即将过期时间设置为过去的时间，最后一个参数可以传负数来实现
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}
setCookie('cjs','cjs',30); //设置 name为cjs，value为cjs的一个cookie，并且时间为30天。
setCookie('cjs','cjs',-1); //让该cookie过期,然后在document.cookie中就没有cjs=cjs这个cookie了。但是其他key=value还存在
//获取某个key的cookie
function getCookie(key){
    let arr1 = document.cookie.split(';');
    for(let i=0;i<arr1.length;i++){
        let arr2 = arr1[i].split('=');
        if(key.trim() === arr2[0].trim()){
            return (arr2[1]);
        }
    }
    return "";
}
getCookie('cjs'); //因为上面已经将cjs这个cookie干掉了，所以这里得到为 ""

注意：在google瀏覽器上本地html檔案開啟直接給cookie賦值是不允許的，但是firefox可以。所以想要測試的話先在本地開伺服器，讓後再使用本地ip存取該檔案。進行cookie的操作。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用CSS實作乒乓球對打動畫

使用CSS實作乒乓球對打動畫

以上是前端中怎樣設定cookie的詳細內容。更多資訊請關注PHP中文網其他相關文章！