資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Cookie 中儲存 JavaScript 物件？
本教程將教我們如何將 JavaScript 物件儲存到 **Cookie** 中。Cookie 是網站訪問者資訊儲存在文字檔案中的資訊。瀏覽器使用者 Cookie 的儲存有一個特定的機制。當新訪客訪問網站時，伺服器會生成文字並將其傳送給使用者。之後，當用戶允許網頁訪問以檢索 Cookie 時，伺服器會將所有使用者資訊儲存在文字檔案中。
**Cookie** 儲存使用者的搜尋歷史記錄或其他資訊，以提供更好的體驗。例如，Google 會儲存使用者的搜尋歷史記錄，以便根據使用者的興趣在網頁上投放廣告。YouTube 會儲存 Cookie 以推薦與使用者興趣相關的影片。
在這裡，我們將學習儲存和獲取 Cookie 到 Web 伺服器的基本方法。
為特定網頁設定 Cookie
首先，我們將學習如何 **設定 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 僅以字串格式儲存資訊。如果使用者想要在 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 的資料。
11K+ 次瀏覽
