JavaScript 建立Cookie

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

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

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

一.document.cookie：

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

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

關於此屬性具體用法可以參閱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資訊：

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 語法結構一章節。