在公司作為一名產(chǎn)品人員秕豫，為了方便同事查看產(chǎn)品原型于是自己編碼構(gòu)建一個(gè)簡(jiǎn)單的原型導(dǎo)航頁(yè)，卻發(fā)現(xiàn)大多人不知如何使用观蓄，于是便產(chǎn)生了增加一個(gè)僅在瀏覽者第一次進(jìn)入網(wǎng)站時(shí)顯示操作指引的功能混移。

最終效果

"點(diǎn)擊查看對(duì)應(yīng)版本"

查閱了資料之后發(fā)現(xiàn) w3school 關(guān)于 cookie 的使用教程 比較容易讓人理解，但對(duì)于我一個(gè)新手來(lái)說(shuō)還是有許多不懂的地方侮穿，于是再次查閱資料結(jié)合自己的理解對(duì)代碼進(jìn)行逐行的注釋歌径。如有錯(cuò)誤，希望指出亲茅。

主要分為 3 個(gè)部分

1. 創(chuàng)建和存儲(chǔ) cookie
2. 獲取 cookie
3. 檢查 cookie

1. 創(chuàng)建和存儲(chǔ) cookie

代碼:

//setCookie 方法需要傳入 3 個(gè)參數(shù) ：
//c_name （cookie 的名稱）回铛、value （cookie 的值）、expiredays（cookie 有效時(shí)間）

function setCookie(c_name,value,expiredays)
{
  //創(chuàng)建一個(gè) Date 對(duì)象

  var exdate=new Date()

  //使用 getDate() 方法獲取當(dāng)前日期 例如：24
  //使用 setDate 方法設(shè)置 exdate 的時(shí)間為：當(dāng)前日期 + expiredays（cookie 有效時(shí)間）

  exdate.setDate(exdate.getDate()+expiredays)

  //設(shè)置 cookie 并賦值給 documet.cookie 
  //判斷 expiredays （cookie 有效時(shí)間）是否為 null,如果是則值為空克锣，否則同樣賦值給 document.cookie

  document.cookie=c_name+ "=" +escape(value)+
  ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

特別舉例解釋一下:

  exdate.setDate(exdate.getDate()+expiredays)

例如：現(xiàn)在時(shí)間是 2017 - 09 - 24
exdate.getDate() 的值就是 24茵肃，
如果 expiredays 傳入的值為 10，exdate.getDate()+expiredays = 24+10 = 4 （因?yàn)?9 月 24 日往后數(shù) 10 天就是 10 月 4 日）
最后
exdate = 10 月 4 日 （cookie 在此時(shí)過(guò)期）

關(guān)于 escape 應(yīng)用 w3school 的解釋

escape() 函數(shù)可對(duì)字符串進(jìn)行編碼袭祟，這樣就可以在所有的計(jì)算機(jī)上讀取該字符串验残。

關(guān)于 toGMTString() w3school 的解釋

toGMTString() 方法可根據(jù)格林威治時(shí)間 (GMT) 把 Date 對(duì)象轉(zhuǎn)換為字符串，并返回結(jié)果巾乳。
不贊成使用此方法胚膊。請(qǐng)使用 toUTCString() 取而代之９世！

2. 獲取 cookie

第 1 步中完成了通過(guò)給 cookie 設(shè)置鍵與值以及有效時(shí)間的方式創(chuàng)建和存儲(chǔ) cookie 的工作紊婉，接下來(lái)需要獲取 cookie

代碼

//getCookie 方法傳入在設(shè)置 cookie 時(shí)設(shè)置的鍵作為參數(shù)，返回 cookie 的值
function getCookie(c_name)
{
 if (document.cookie.length>0)
  {
   //如果 document.cookie.length > 0  說(shuō)明存在 cookie

   //使用 indexOf() 方法獲取 document.cookie 中是否存在字符串 = c_name + "=" ,
   //如果有則返回索引辑舷，否則返回 -1 喻犁，最后將返回值賦值給 c_start

  c_start=document.cookie.indexOf(c_name + "=")

  if (c_start!=-1)
    { 
    // c_start != -1 說(shuō)明指定的 cookie（ c_name） 有值

    //使用 substring() 方法截取 cookie 的值 ，在這之前何缓，先獲取截取的起點(diǎn)與終點(diǎn)

    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start) 
    //如果 c_end == -1 肢础，說(shuō)明 document.cookie 中從 c_start 開(kāi)始沒(méi)有查找到";" 
    //說(shuō)明 document.cookie 中僅有 1 個(gè)鍵值對(duì)（只有 1 個(gè) cookie）
    if (c_end==-1) 
    {
      //如果 document.cookie 中僅有 1 個(gè)鍵值對(duì)，那 substring() 截取的終點(diǎn)就是 document.cookie 的長(zhǎng)度值
      c_end=document.cookie.length
    }
    
    //由于前面使用了 escape() 進(jìn)行編碼碌廓，這里需要使用 unescapge 進(jìn)行解碼并返回值
    //w3school 注釋：ECMAScript v3 已從標(biāo)準(zhǔn)中刪除了 unescape() 函數(shù)传轰，并反對(duì)使用它，
    //因此應(yīng)該用 decodeURI() 和 decodeURIComponent() 取而代之谷婆。

    return unescape(document.cookie.substring(c_start,c_end))

    } 
  }
return ""
}

3. 檢查 cookie

最后慨蛙，在用戶訪問(wèn)網(wǎng)頁(yè)時(shí)使用 checkCookie 方法

function checkCookie()
{
  // 使用 getCookie 方法獲取指定 cookie  

  first=getCookie('first')

  //判斷指定 cookie 值是否存在

  if (first!=null && first!="")
  {
    //如果存在指定的 cookie 值 說(shuō)明用戶不是第一次進(jìn)入網(wǎng)頁(yè)不提示用戶
  }
  else 
  {
      //用戶是第一次打開(kāi)網(wǎng)頁(yè)，顯示操作提示

      layer.tips('點(diǎn)擊查看對(duì)應(yīng)版本') // layer 的用法可查看文末參考資料

      //設(shè)置 cookie 纪挎，記錄當(dāng)前用戶已訪問(wèn)過(guò)一次網(wǎng)頁(yè)，待下一次用戶打開(kāi)網(wǎng)頁(yè)時(shí)使用

      setCookie('first','1',365)

  }//else END

}

完成

"點(diǎn)擊查看對(duì)應(yīng)版本"

參考資料：

1. w3school JavaScript Cookies
2. 腳本之家
3. layer