JavaScript 建立Cookie

admin發表於2019-10-24

Cookie的建立在本質上並不區分具體何種語言,最終產生的Cookie都是通用的。

通過JavaScript或者PHP等某種語言建立Cookie,本質是傳達指令給瀏覽器,讓其建立Cookie。

下面通過程式碼例項介紹一下,如何利用JavaScript建立Cookie。

一.document.cookie:

JavaScript只能依靠document.cookie來操作Cookie。

通過它可以檢視和設定Cookie,看如下谷歌開發者工具控制檯截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201910/24/114540zni1of1q0oopfk0k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於此屬性具體用法可以參閱document.cookie 用法一章節。

二.建立Cookie:

JavaScript通過document.cookie建立Cookie。

此屬性比較特殊,看如下程式碼:

[JavaScript] 純文字檢視 複製程式碼
let url="https://www.softwhy.com";
url="https://www.baidu.com";

url屬性值最終會被重置為"https://www.baidu.com"。

但是document.cookie並不會,給它賦值是為其追加一個cookie。

[JavaScript] 純文字檢視 複製程式碼
document.cookie="antzone=螞蟻部落"

下面在谷歌開發者工具檢視一下Cookie資訊:

a:3:{s:3:\"pic\";s:43:\"portal/201910/24/114649ngfmgl6mccw62g6s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Cookie的格式沒有這麼簡單,還可以進行其他方面的限制,下面的程式碼封裝會有涉及。

二.封裝:

JavaScript操作cookie不夠方便,下面對其進行一下封裝。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function set(name, value, opts){
  //opts maxAge, path, domain, secure
  if(name && value){
    var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    //可選引數
    if(opts){
      if(opts.maxAge){
        cookie += '; max-age=' + opts.maxAge;
      }if(opts.path){
        cookie += '; path=' + opts.path;
      }if(opts.domain){
        cookie += '; domain=' + opts.domain;
      }if(opts.secure){
        cookie += '; secure';
      }
    }
    document.cookie = cookie;
    return cookie;
  }else{
    return '';
  }
}

上述程式碼不但設定了Cookie名稱和值,並且還可以設定其他約束。

上面封裝的詳解和Cookie完整格式可以參閱Cookie 語法結構一章節。

相關文章