JavaScript BOM Cookie 的用法

Carbs 發布于2019-08-26 10:31 / 539人閱讀

摘要：如果您的瀏覽器已關閉本地支持，則以下示例均無效。刪除時，不必指定值。但事實并非如此。訪問者第一次到達網頁時，將要求他她填寫他她的姓名。檢查的功能最后，我們創建一個函數來檢查是否設置了。

JavaScript Cookie

Cookie是計算機上存儲在小文本文件中的數據。當Web服務器將網頁發送到瀏覽器時，連接將關閉，服務器將忘記用戶的所有內容。發明Cookie是為了解決“如何記住用戶信息”的問題：
當用戶訪問網頁時，他/她的名字可以存儲在cookie中。
下次用戶訪問該頁面時，cookie會“記住”他/她的名字。
Cookie以鍵值對形式保存，如：

username = John Doe

當瀏覽器從服務器請求網頁時，屬于該頁面的cookie將添加到請求中。這樣，服務器獲取必要的數據以“記住”有關用戶的信息。
如果您的瀏覽器已關閉本地Cookie支持，則以下示例均無效。

使用JavaScript創建Cookie

JavaScript可以使用document.cookie屬性創建，讀取和刪除cookie。使用JavaScript，可以像這樣創建一個cookie：

document.cookie = "username=John Doe";

您還可以添加到期日期（以UTC時間為單位）。默認情況下，在瀏覽器關閉時刪除cookie：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用path參數，您可以告訴瀏覽器cookie屬于哪個路徑。默認情況下，cookie屬于當前頁面。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

使用JavaScript閱讀Cookie

使用JavaScript，cookie可以像這樣讀取：

var x = document.cookie;

document.cookie將返回一個字符串中的所有cookie，如：cookie1 = value; cookie2 =值; cookie3 =值;

使用JavaScript更改Cookie

使用JavaScript，您可以像創建cookie一樣更改cookie：

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

舊cookie被覆蓋。

使用JavaScript刪除Cookie

刪除cookie非常簡單。刪除cookie時，不必指定cookie值。只需將expires參數設置為傳遞日期：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您應該定義cookie路徑以確保刪除正確的cookie。如果您未指定路徑，某些瀏覽器將不允許您刪除cookie。

Cookie字符串

document.cookie屬性看起來像普通的文本字符串。但事實并非如此。即使你將一個完整的cookie字符串寫入document.cookie，當你再次讀出它時，你只能看到它的名稱 - 值對。如果您設置了新cookie，則不會覆蓋較舊的cookie。新的cookie被添加到document.cookie，所以如果你再次閱讀document.cookie，你會得到類似的東西：cookie1 = value; cookie2 = value;
如果要查找一個指定cookie的值，則必須編寫一個JavaScript函數來搜索cookie字符串中的cookie值。

JavaScript Cookie示例

在下面的示例中，我們將創建一個存儲訪客姓名的cookie。訪問者第一次到達網頁時，將要求他/她填寫他/她的姓名。然后將名稱存儲在cookie中。下次訪問者到達同一頁面時，他/她將收到歡迎信息。在這個例子中，我們將創建3個JavaScript函數：

用于設置cookie值的函數

獲取cookie值的函數

用于檢查cookie值的函數

設置Cookie的功能

首先，我們創建一個函數將訪問者的名稱存儲在cookie變量中：

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

示例說明：
上述函數的參數是cookie的名稱（cname），cookie的值（cvalue）以及cookie到期之前的天數（exdays）。該函數通過將cookiename，cookie值和expires字符串相加來設置cookie。
獲取Cookie的功能
然后，我們創建一個function返回指定cookie的值：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(";");
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

功能說明：
將cookiename作為參數（cname）。使用要搜索的文本（cname +“=”）創建變量（名稱）。解碼cookie字符串，處理帶有特殊字符的cookie，例如"$"將分號上的document.cookie拆分為名為ca的數組（ca = decodingCookie.split（";"））。循環通過ca數組（i = 0; i < ca.length; i ++），并讀出每個值c = ca [i]）。如果找到cookie（c.indexOf（name）== 0），則返回cookie的值（c.substring（name.length，c.length））。如果找不到cookie，則返回“”。
檢查Cookie的功能
最后，我們創建一個函數來檢查是否設置了cookie。如果設置了cookie，它將顯示問候語。如果未設置cookie，它將顯示一個提示框，詢問用戶的名稱，并通過調用setCookie函數將用戶名cookie存儲365天：

function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
   alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

所有代碼都在一起實現

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(";");
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

上面的示例checkCookie()在頁面加載時運行該函數。
更詳情的Cookie技術文章

云服務器 GPU云服務器 javascript創建cookie javascript獲取cookie javascript刪除cookie JavaScript使用cookie

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106303.html

JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

garfileo 2019-08-01 18:16 評論0 收藏0
JavaScript 基礎知識 - BOM篇

摘要：在中我們需要掌握定時器。定時器不是我們調用，我們只需要把函數的地址傳過去，時間到了，會自己調用。參數延時的時間單位毫秒返回定時器的，用于清除示例代碼延時定時器秒后將執行的代碼。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基礎知識的BOM篇，...

Object 2019-08-21 18:24 評論0 收藏0
面試題總結

摘要：所以個人建議將登陸信息等重要信息存放為其他信息如果需要保留，可以放在中和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。不同點仍會占據位置，會覆蓋文檔流中的其他元素。說說你對閉包的理解使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。閉包有三個特性：函...

RiverLi 2019-08-20 17:33 評論0 收藏0
常見js筆試面試題（持續更新）

摘要：相當于繞過了瀏覽器端，自然就不存在跨域問題。三者的區別與服務器的交互數據始終在同源的請求中攜帶即使不需要，即在瀏覽器和服務器間來回傳遞。而和不會自動把數據發給服務器，僅在本地保存。和雖然也有存儲大小的限制，但比大得多，可以達到或更大。本文提供最簡便的解答方式，方便快速記憶，復盤，詳細答案可自己再搜一下。 js基礎知識 1. javascript typeof返會的數據類型有哪些 ob...

yuxue 2019-08-21 17:28 評論0 收藏0
網站常見安全問題記錄（持續更新）

摘要：由此造成即使頁面的或者設置為，也無法讓整個網頁緊貼瀏覽器頂部，因為在一開頭有這個隱藏字符解決辦法保存文件為建議不要用記事本打開開發文件說明初衷：本文檔用于記錄所遇到的網站安全問題，并分類匯總，方便后期遇到類似問題，能夠快速找到解決方案，提高效率，讓程序員有更多的時間去把妹，LOL... 記錄規范：標題必須清晰明了，方便用戶快速查找，拒絕標題黨；問題放到正確的分類中；記錄問...

Jason_Geng 2019-07-24 10:52 評論0 收藏0