JS中document.cookie詳解

来源:http://www.cnblogs.com/moqiutao/archive/2017/09/13/7516446.html
-Advertisement-
Play Games

什麼是cookie? cookie 是存儲於訪問者的電腦中的變數。每當同一臺電腦通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。 設置cookie 每個cookie都是一個名/值對,可以把下麵這樣一個字元串賦值給docum ...


什麼是cookie?

cookie 是存儲於訪問者的電腦中的變數。每當同一臺電腦通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。

設置cookie

每個cookie都是一個名/值對,可以把下麵這樣一個字元串賦值給document.cookie:

document.cookie="userId=828";

document.cookie看上去就像一個屬性,可以賦不同的值。但它和一般的屬性不一樣,改變它的賦值並不意味著丟失原來的值,例如連續執行下麵兩條語句:

document.cookie="userId=828";
document.cookie="userName=hulk"; 

這時瀏覽器將維護兩個cookie,分別是userId和userName,因此給document.cookie賦值更像執行類似這樣的語句:

document.addCookie("userId=828");
document.addCookie("userName=hulk");

事實上,瀏覽器就是按照這樣的方式來設置cookie的,如果要改變一個cookie的值,只需重新賦值,例如:

document.cookie="userId=929";

這樣就將名為userId的cookie值設置為了929。

獲取cookie的值

下麵介紹如何獲取cookie的值。cookie的值可以由document.cookie直接獲得:

var strCookie=document.cookie; 

這將獲得以分號隔開的多個名/值對所組成的字元串,這些名/值對包括了該功能變數名稱下的所有cookie。例如:

document.cookie="userId=828";
document.cookie="userName=hulk";
var strCookie=document.cookie;
console.log(strCookie); //userId=828; userName=hulk

當然這個要在環境下運行,因為是獲取當前功能變數名稱下的cookie。

由此可見,只能夠一次獲取所有的cookie值,而不能指定cookie名稱來獲得指定的值,這正是處理cookie值最麻煩的一部分。

用戶必須自己分析這個字元串,來獲取指定的cookie值,例如,要獲取userId的值,可以這樣實現:

document.cookie="userId=828";
document.cookie="userName=hulk";
var strCookie=document.cookie;
console.log(strCookie); //userId=828; userName=hulk


function getdescookie(strcookie,matchcookie){
    var getMatchCookie;
    var arrCookie=strcookie.split(";");
    for(var i=0;i<arrCookie.length;i++){
         var arr=arrCookie[i].split("=");
         if(matchcookie == arr[0]){
                getMatchCookie = arr[1];
                break;
         }
    }
    return getMatchCookie;
}

var resultCookie = getdescookie(strCookie,'userId');
console.log(resultCookie); //828

這樣就得到了單個cookie的值

如果在某個頁面創建了一個cookie,那麼該頁面所在目錄中的其他頁面也可以訪問

該cookie。如果這個目錄下還有子目錄,則在子目錄中也可以訪問。

例如在www.xxxx.com/html/a.html中所創建的cookie,可以被www.xxxx.com/html/b.htmlwww.xxx.com/ html/ some/c.html所訪問,但不能被www.xxxx.com/d.html訪問。

為了控制cookie可以訪問的目錄,需要使用path參數設置cookie,語法如下:

document.cookie="name=value; path=cookieDir";

其中cookieDir表示可訪問cookie的目錄。

例如:

document.cookie="userId=320; path=/shop";

就表示當前cookie僅能在shop目錄下使用。
如果要使cookie在整個網站下可用,可以將cookie_dir指定為根目錄,例如:

document.cookie="userId=320; path=/";

常用的cookie操作及其函數實現

addCookie

addCookie(name,value,expireHours) 該函數接收3個參數:cookie名稱,cookie值,以及在多少小時後過期。

function addCookie(name,value,expireHours){
     var exdate = new Date();    
    exdate.setTime(exdate.getTime() + expireHours * 60 * 60 * 1000);    
  document.cookie = c_name + "=" + escape(value) + ((expireHours == null) ? "" : ";expires=" + exdate.toUTCString());
}

getCookie

獲取指定名稱的cookie值:getCookie(name)

該函數返回名稱為name的cookie值,如果不存在則返回空,其實現如下:

function getCookie(name){
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)){
        return (arr[2]);
    }else{
         return null;
    }      
}

或者不用正則匹配,如下麵代碼:

function getCookie(name){
     var strCookie=document.cookie;
     var arrCookie=strCookie.split(";");
     for(var i=0;i<arrCookie.length;i++){
           var arr=arrCookie[i].split("=");
           if(arr[0]==name){
                return arr[1];
           }
     }
     return null;
}

deleteCookie

刪除指定名稱的cookie:deleteCookie(name)

該函數可以刪除指定名稱的cookie,其實現如下:

function deleteCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    document.cookie = name + "=v;expires=" + exp.toUTCString();
}

說明下:這兒我用的toUTCString()方法,看了網上有的用的toGMTString()在格式化時間,但不贊成使用此方法。請使用 toUTCString() 取而代之!!,在W3C中看到這句話。

 可參考地址:http://www.w3school.com.cn/js/js_cookies.asp

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在git命令行下,執行以下命令完成環境的搭建: 1,npm install --global vue-cli 安裝vue命令行工具 2,vue init webpack vue-demo 使用vue命令生成一個webpack項目,項目名稱為vue-demo 3,cd vue-demo 切入項目 4, ...
  • 一,Rest and Spread操作符: 用來聲明任意數量的方法參數也就是“...”操作符 輸出結果: 18 jajj 89 function test (a, b, c) { console.log(a); console.log(b); console.log(c); } var agrs = ...
  • 用JS編寫一個函數,返回數組中重覆出現過的元素,見下麵的代碼: 而數組去重的方法詳見我的另一篇博文-->數組去重 ...
  • 1、對象集合 cells[] 返回包含表格中所有單元格的一個數組 rows[] 返回包含表格中所有行的一個數組 tBodies[] 返回包含表格中所有tbody的一個數組(主包含ty和td) 2、對象屬性 border 設置或返回表格邊框的寬度 caption 對錶格的caption元素的引用 ce ...
  • 最近搞Canvas繪圖,知道了JavaScript中提供了atan2(y,x)這樣一個三角函數。乍眼一看,不認識,畢竟在高中時,學過的三角函數有:sin,cos,arcsin,arccos,tan,arctan等,並沒有這個。而工作中又需要用到它,所以這裡就做了個簡單的瞭解。 何時需要用到 atan ...
  • gitHub地址 https://github.com/Webxiaoyaun/vue-book/tree/master/vue-book 點擊去Github下載 ## 一個書城## 有增加,修改,緩存,懶載入,node.js寫的後臺,動畫過渡,輪播圖 等功能 ...
  • 前面的話 Vue 的過渡系統提供了非常多簡單的方法設置進入、離開和列表的動效。那麼對於數據元素本身的動效呢?包括數字和運算、顏色的顯示、SVG 節點的位置、元素的大小和其他的屬性等。所有的原始數字都被事先存儲起來,可以直接轉換到數字。做到這一步,我們就可以結合 Vue 的響應式和組件系統,使用第三方 ...
  • html界面 css代碼 靜態網頁效果圖 jQuery實現 實現定時器效果 實現懸浮效果 實現移開效果 JS腳本實現 實現定時器效果 懸浮效果 移開效果 效果圖 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...