首頁 > web前端 > js教程 > 如何在 JavaScript 中唯一標識存取網站的電腦?

如何在 JavaScript 中唯一標識存取網站的電腦?

WBOY
發布: 2023-09-13 12:33:03
轉載
732 人瀏覽過

如何在 JavaScript 中唯一标识访问网站的计算机?

每當我們建立任何應用程式或網站時,我們都需要唯一地識別造訪網站的電腦。唯一標識計算機有很多好處。

例如,您正在向使用者提供一些服務。透過唯一識別計算機,當使用者首次從新設備造訪您的網站時,您可以提供免費試用服務。當用戶再次造訪時,您可以要求用戶購買高級版或訂閱您的應用程式。

在這裡,我們將使用 cookie 來識別造訪網站的電腦。

什麼是 cookie?

Cookie 允許開發人員在瀏覽器中儲存使用者資訊。例如,我們可以將資料從伺服器傳送到瀏覽器並儲存在瀏覽器中。因此,每當用戶重新訪問該網站時,它都會從 cookie 而不是從伺服器獲取資料。因此,cookie 可以提高應用程式的效能。

在我們的例子中,當使用者第一次造訪網站時,我們可以將 cookie 設定為 100 年到期。此後,每當使用者再次造訪該網站時,我們都會檢查cookie是否存在,然後我們就可以說使用者重新造訪了該網站。

文法

使用者可以依照下列語法在網頁瀏覽器上設定和取得 cookie。

// to set cookies
document.cookie = "isVisited=true";

// to get cookies
let ca = decodeURIComponent(document.cookie).split(';'); 
登入後複製

在上面的語法中,我們將一個帶有鍵值對的字串指派給 document.cookie 以將 cookies 設定到瀏覽器中。要取得 cookie,我們可以簡單地使用 document.cookie,它會傳回 cookie 陣列。

步驟

第 1 步 - 建立 fetchCookies() 函數。

第 2 步驟 - 在 fetchCookies() 函數中,使用 document.cookie 取得陣列格式的 cookie,並使用decodeURIComponent() 方法對 cookie 進行解碼。

第 3 步 - 使用 for 迴圈迭代陣列。

步驟 4 - 對於陣列的每個元素,刪除陣列開頭的空格。

第 5 步 - 使用 indexOf() 方法檢查陣列元素是否包含第 0th 索引處的鍵,並使用 substring() 取得鍵值方法。

第 6 步 - 傳回特定鍵的值。

第 7 步 - 建立 fetchCookies() 函數。在 fetchCookies() 函數中,呼叫 getCookie() 函數並檢查 cookie 是否存在。

第 8 步 - 如果 cookie 為空,則設定 cookie。

第9步 - 根據所需的cookie是否為空列印訊息。

範例

在下面的範例中,每當使用者第一次造訪網站時,我們都會在 cookie 中將「isValidate」設定為「true」值。每當使用者第二次造訪網站時,我們都會在 cookie 中取得“isValidate”,因此我們會列印「歡迎回到網站」之類的訊息。

<html>
<body>
   <h3>Using the <i> Cookies </i> to uniquely identify computers visiting web site in JavaScript</h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      
      // function to get cookies
      function fetchCookies(cname) {
         let key = cname + "=";
         let ca = decodeURIComponent(document.cookie).split(';');
         for (let i = 0; i < ca.length; i++) {
            let part = ca[i];
            while (part.charAt(0) == ' ') {
               part = part.substring(1);
            }
            if (part.indexOf(key) == 0) {
               return part.substring(key.length, part.length);
            }
         }
         return null;
      }
      
      // set cookies to uniquely identify the computer visiting the website
      function checkCookies() {
         var cookies = fetchCookies("isVisited");
         if (cookies == null) {
            content.innerHTML = "Welcome to the website";
            document.cookie = "isVisited=true";
         } else {
            content.innerHTML = "Welcome back to the website";
         }
      }
      checkCookies();
   </script>
</body>
</html>
登入後複製

範例

在下面的範例中,每當使用者第一次造訪網站時,我們都會使用提示框詢問他們的姓名並顯示歡迎訊息。此外,我們將 cookie 設定為 100 年有效期限。

每當用戶第二次造訪時,我們都會顯示帶有他們姓名的歡迎訊息,而不會詢問他們的姓名。

<html>
<body>
   <h3>Using the <i> Cookies </i> to uniquely identify computers visiting web site in JavaScript</h3>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById('content');
      
      // function to get cookies
      function fetchCookies(cname) {
         let key = cname + "=";
         let ca = decodeURIComponent(document.cookie).split(';');
         for (let i = 0; i < ca.length; i++) {
            let part = ca[i];
            while (part.charAt(0) == ' ') {
               part = part.substring(1);
            }
            if (part.indexOf(key) == 0) {
               return part.substring(key.length, part.length); 
            }
         }
         return null;
      }
      
      // set cookies to uniquely identify the computer visiting the website
      function checkCookies() {
         var cookies = fetchCookies("customCookie");
         if (cookies == null) {
            let name = prompt("Enter your name", "Shubham");
            document.cookie = "customCookie=" + name + "; expires=Thu, 23 Oct 2120 12:00:00 UTC; path=/";
            content.innerHTML = "How are you " + name + "?";
         }
         else {
            content.innerHTML = "Hey, " + cookies + " You visited our site again!";
         }
      }
      checkCookies();
   </script>
</body>
</html> 
登入後複製

使用者學會了使用 JavaScript 中的 cookie 來唯一識別造訪網站的電腦。然而,cookie 有一些限制。如果使用者清除cookie,我們就無法唯一地辨識該電腦。另外,我們需要將 cookie 的有效期限設定為 100 年。此外,如果使用者使用不同的瀏覽器,我們無法唯一地識別電腦。

克服上述所有問題的最佳解決方案是使用 Google Analytics。

以上是如何在 JavaScript 中唯一標識存取網站的電腦?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板