資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何建立和讀取cookie的值
概述
Cookie是臨時儲存，以鍵值對的形式儲存使用者資料。Cookie儲存在客戶端系統上。當用戶訪問網站時，會向託管網站的伺服器傳送請求，然後伺服器載入內容並將其傳送回接收端（接收端是客戶端或使用者）。伺服器傳送Cookie以儲存使用者資料以供將來使用。但最終取決於使用者是否要將登入憑據儲存到Cookie中。就像可食用的餅乾中填充巧克力一樣，在網頁Cookie中，Cookie是“甜甜圈”，而填充的巧克力是Cookie的值。
語法
建立Cookie的語法如下：
document.cookie= cookieName + cookieValue + cookieExpiry;
cookieName − 這是儲存值的Cookie名稱。例如：使用者名稱、地址等等。
cookieValue − 這是儲存在Cookie名稱鍵中的值。例如：Alex、美國等。
cookieExpiry − 這是一個數值，表示Cookie在客戶端瀏覽器中保持有效的天數。
演算法
步驟 1 − 在文字編輯器（如Sublime Text或Visual Studio Code）中建立一個HTML檔案。在HTML檔案中新增HTML基本結構。
步驟 2 − 現在，向HTML文件的body標籤新增onload()事件函式。將一個名為“myFunc()”的函式傳遞給onload()函式。
<body onload="myFunc()"></body>
步驟 3 − 現在，在與HTML檔案相同的資料夾中建立一個script.js檔案。在body標籤結束之前，將script.js檔案連結到HTML文件。
<script src="script.js"></script>
步驟 4 − 現在，在指令碼檔案中建立一個箭頭函式，該函式檢查客戶端系統中是否存在Cookie。函式名稱應與我們在body標籤中作為屬性傳遞給onload()函式的名稱相同。
myFunc = () => {
var cl = readCookiesValue("clients_Name");
var ad = readCookiesValue("clients_address")
if (cl != "") {
alert("Welcome " + cl +" from "+ad + “ to the server”);
} else {
cl = prompt("Write your name", "");
ad = prompt("Write your address", "");
if (cl != "" && cl != null) {
createCookies("clients_Name", cl, 30);
createCookies("clients_address", ad, 30);
}
}
}
步驟 5 − 現在，建立一個名為“createCookies”的箭頭函式，該函式將為使用者建立一個Cookie。建立Cookie將cookie名稱、cookie值和cookie有效期作為三個引數。Cookie將使用“document.cookie”語法建立。
createCookies = (ckName, ckValue, ckExpiry) => {
var cdate = new Date();
date.setTime(cdate.getTime() + (ckExpiry * 24 * 60 * 60 * 1000));
var expires = "expires=" + cdate.toGMTString();
document.cookie = ckName + "=" + ckValue + ";" + expires + ";path=/";
}
步驟 6 − 建立Cookie後，建立一個名為“readCookiesValue”的箭頭函式，該函式將讀取瀏覽器中當前的Cookie，這將cookie名稱作為引數，並返回cookie的值。
readCookiesValue = (cookieName) => {
var name = cookieName + "=";
var decoded_cookie = decodeURIComponent(document.cookie);
var dcooks = decoded_cookie.split(';');
for (let i = 0; i < dcooks.length; i++) {
var c = dcooks[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
步驟 7 − Cookie的讀取和建立函式已成功建立。
示例
在這個例子中，我們建立了一個函式，該函式將檢查客戶端瀏覽器中是否存在Cookie，如果客戶端瀏覽器中不存在Cookie，則它將為當前客戶端建立Cookie，並將其儲存到Cookie過期之前。
<html>
<head>
<title>Create and read cookie value</title>
</head>
<body onload="myFunc()">
<h1 style="text-align: center;color: green;" onload="myfunc()">Welcome to tutorialspoint.com</h1>
<script src="script.js"></script>
<script>
myFunc = () => {
var client = readCookiesValue("clients_Name");
var adress = readCookiesValue("clients_address")
if (client != "") {
alert("Hello " + client +" from "+adress);
} else {
client = prompt("Enter your name", "");
adress = prompt("Enter your adress", "");
if (client != "" && client != null) {
createCookies("clients_Name", client, 30);
createCookies("clients_address", adress, 30);
}
}
}
createCookies = (cookieName, cookieValue, cookieExpiry) => {
var date = new Date();
date.setTime(date.getTime() + (cookieExpiry * 24 * 60 * 60 * 1000));
var expires = "expires=" + date.toGMTString();
document.cookie = cookieName + "=" + cookieValue + ";" + expires; + ";path=/";
}
readCookiesValue = (cookieName) => {
var name = cookieName + "=";
var decoded_cookie = decodeURIComponent(document.cookie);
var dcooks = decoded_cookie.split(';');
for (let i = 0; i < carr.length; i++) {
var c = carr[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</body>
</html>
輸出
下圖顯示了上述示例的輸出，在該示例中，我們構建了讀取和建立Cookie的函式。因此，當用戶第一次在其瀏覽器中載入上述示例時，該函式將檢查當前請求中是否存在Cookie，如果不存在，則客戶端將收到一個提示，要求其輸入姓名，客戶端在框中輸入姓名後，將收到另一個提示，要求其輸入城市名稱，然後將重定向到主要內容。因此，當客戶端第二次載入網頁時，該函式將再次檢查Cookie，此時Cookie存在於客戶端瀏覽器中，因此客戶端將收到一條問候訊息“您好，cityName 的 clientName”，您可以在第三張圖片中看到。
結論
Cookie用於所有應用程式，例如irctc和其他網站的預訂和瀏覽目的。它們允許使用者登入網站，只要Cookie有效。有時Cookie也會對系統構成危險，因為某些有害或盜版網站可能會建立Cookie來監視您的系統，因此建議不要接受來自未知網站的Cookie。
398 次瀏覽
