如何在 Cookie 中儲存 JavaScript 物件？

本教程將教我們如何將 JavaScript 物件儲存到Cookie中。Cookie 是網站訪問者資訊，儲存在文字檔案中。有一種特殊的機制來儲存使用者瀏覽器中的 Cookie。當新訪客訪問網站時，伺服器會生成文字並將其傳送給使用者。之後，當用戶允許網頁訪問以檢索 Cookie 時，伺服器會將所有使用者資訊儲存在文字檔案中。

Cookie儲存使用者的搜尋歷史或其他資訊，以提供更好的體驗。例如，Google 儲存使用者的搜尋歷史記錄，以便根據使用者的興趣在網頁上投放廣告。YouTube 儲存 Cookie 以根據使用者的興趣推薦影片。

在這裡，我們將學習儲存和獲取 Cookie 到 Web 伺服器的基本方法。

為特定網頁設定 Cookie

首先，我們將學習如何從瀏覽器設定 Cookie和獲取 Cookie。我們將以字串的形式儲存基本資訊。此外，我們還設定了 Cookie 的過期時間。使用者還可以將路徑新增到 Cookie 中，以瞭解 Cookie 已設定到的位置。

使用者可以按照以下語法來儲存和獲取 Cookie。

語法

// set cookies in the string format
window.onload = () => { 
   document.cookie = "info=tutorialsPoint; expires=Mon, 27 june 2022 12:00:00 UTC;"; 
}     

//get cookies
Var cookie = document.cookie;

演算法（獲取特定 Cookie）

當我們將一些資訊儲存到 Cookie 值時，它會附加到之前的 Cookie，不會覆蓋舊值。因此，當我們使用 document.cookies 時，它會返回所有儲存的 Cookie。我們需要從 Cookie 的所有鍵值對中提取所需的 Cookie。

以下是建立函式以從 Cookie 中提取所需鍵值的演算法。

  • 步驟 1 - 使用 document.cookie 方法獲取原始 Cookie 字串格式。

  • 步驟 2 - 用分號 (;) 分割 Cookie，它將返回鍵值對的陣列。

  • 步驟 3 - 遍歷每個鍵值對以查詢所需的鍵。

  • 步驟 4 - 在遍歷鍵值對時，刪除鍵前方的空格，並檢查鍵是否與我們所需的鍵匹配。

  • 步驟 5 - 如果找到鍵，則返回該鍵的值。否則，該鍵值對未儲存在 Cookie 中。 

示例

在下面的示例中，我們使用document.cookie將 Cookie 儲存在瀏覽器中。我們已實現上述演算法以從 Cookie 中查詢鍵值對。

我們使用了window.onload()方法，在網頁載入時儲存 Cookie。

<!DOCTYPE html>
<html>
<head>
<title> Store JavaScript objects in cookies. </title>
</head>
<body>
   <h2> Set cookies in JavaScript. </h2>
   <h4> Getting info and user id stored in cookies from the browser. </h4>
   <div id="cookies"> </div>
   <script>
      let cookie = document.getElementById("cookies");

      // function get all cookies
      function retriveCookie(name) {
         var name = name + '=';
         var cookies = decodeURIComponent(document.cookie).split(';');
         for (var i = 0; i<cookies.length; i++) {
            var c = cookies[i];
            while (c.charAt(0) == ' ') {
               c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
               cookie.innerHTML += "The cookies is -  " + c.substring(name.length, c.length) + ". <br/>";
            }
         }
      }
      retriveCookie("info");
      retriveCookie("uuid");
      window.onload = () => { document.cookie = "info=tutorialsPoint; expires=Mon, 27 june 2022 12:00:00 UTC;"; }
   </script>
</body>
</html>

在下面的輸出中，使用者可以看到我們已從 Cookie 中檢索了使用者 ID 和資訊。

在 Cookie 中儲存物件

現在，我們已經瞭解了 Cookie 在 JavaScript 中的工作原理以及如何在伺服器上儲存它。Cookie 僅以字串格式儲存資訊。如果使用者希望在 Cookie 中儲存任何其他型別的資料，則需要使用 stringify() 方法將其轉換為字串。

在本節中，我們將物件轉換為字串並將其儲存在 Cookie 中。此外，我們還將從 Cookie 中檢索物件。

語法

請按照以下語法將物件儲存在 Cookie 中。

// store object to the cookies
let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", }
document.cookie = 'object=' + JSON.stringify(object);

示例

在下面的示例中，我們使用JSON.stringify()方法將物件轉換為字串後，將其儲存到 Cookie 中。我們使用了上一節中使用的相同演算法來從 Cookie 中檢索物件。

<html>
<head>
<title> Store JavaScript objects in cookies. </title>
</head>
<body>
   <h2> Set cookies in JavaScript. </h2>
   <h4> Set up and getting objects from the browser cookie. </h4>
   <div id="cookies"></div>
   <script>
      let cookie = document.getElementById("cookies");
      // function get all cookies
      function retriveCookie(name) {
         var name = name + '=';
         var cookies = decodeURIComponent(document.cookie).split(';');
         for (var i = 0; i<cookies.length; i++) {
            var c = cookies[i];
            while (c.charAt(0) == ' ') {
               c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
               cookie.innerHTML = "The object in the cookies is -  " + c;
            }
         }
      }
      retriveCookie("object");
      window.onload = () => {
         let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", }
         document.cookie = 'object=' + JSON.stringify(object);
      }
   </script>
</body>
</html>

好的，我們已經瞭解了 Cookie 在 JavaScript 中的工作原理。Cookie 將使用者資訊傳送到伺服器。因此，駭客可能會發起攻擊並獲取使用者資訊。此外，Cookie 在文字檔案中儲存大約 4kb 的資料。

如今，每個現代瀏覽器都支援會話儲存，將資料儲存在本地計算機中。網頁可以在需要時從會話儲存或本地儲存中檢索資料，而不是從 Cookie 中獲取資料。因此，建議使用會話儲存而不是 Cookie，因為它更安全，使用者可以儲存高達 10MB 的資料。

更新於： 2022 年 8 月 9 日

11K+ 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告