[不是工程師] Cookie 是文檔還是餅乾？簡述HTTP網頁紀錄會員 ...

中譯： HTTP (超文本傳輸安全協定) cookie (小餅乾或小型文字檔案) 是一段由伺服器送給使用者瀏覽器的 ... 進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 [不是工程師]Cookie是文檔還是餅乾？簡述HTTP網頁紀錄會員資訊的一大功臣。

從淘寶到Airbnb，為何他們總能知道我們是誰呢？ 作者:VincentKe 更新日期: 2020/10/03 「不是工程師」系列是以生活化/口語化的方式， 提供科技用詞或是功能另外一種理解的方式， 所以很多用詞與邏輯可能不是那麼的嚴謹，還請見諒。

以下為我們的補充。

  相信常使用電子商務網站的我們，心中一定有個長久的不解之迷，大多數電商網站，從淘寶到Airbnb等，只要使用過登入之後，就可以無需再次登入並可進入結帳，甚至是再關閉服務、離開網站後，下次登入都可以自動的記憶登入資訊，讓我們減少過去煩雜的登入流程；還有像是那些我們曾經瀏覽過的商品，也會一直如影隨形的出現在我們的頁面中，讓我們一直與下單與否的小惡魔奮戰，這樣便捷簡單的方式，不僅可以有效降低系統操作的複雜性，並可以提升使用者體驗，這樣的糾葛，到底是如何在網站功能背後實現的呢?     今天也許用網站實例來作連想會比較有些許聯想上的困難，不如用生活的實例來思考好了，想像一下今天我們去外帶飲料取餐，領完號碼牌之後，接續叫號點餐，取餐等等，其實在網路世界中，也是利用相同的概念來作"單一登入"得這個服務，以電子商務網站為例，中間的首頁、商品頁到購物車、結帳頁等，中間都需要透過一連串的串連，而這些串連是如何保有你的登入資訊，來降低這些不必要的使用者流程呢?在這裡就必須先提到兩大技術，一個是Cookie，一個是Session了，而在本文中，我們會先介紹Cookie。

  首先瀏覽器和WEB服務(或是Server)之間，我們知道是透過HTTP協議來進行通訊，而這樣的協議是一種無狀態的協議，簡言之當我們操作某些功能時，例如搜索，WEB服務應用端就會接收到為因應我們的需求所發出來的Request，並作出相對應的響應，完成響應之後就會結束與該用戶的連接，例如傳統飲料店我們點餐後，老闆娘只能憑藉著記憶來幫你作出你點的飲料，而這個老闆娘的記憶力相當不好，並不會因為你是熟客就記錄你每天的點餐習慣，每天都會當成你是第一次來買飲料的人，而當你需要發出下一次Request，例如取飲料時，他才會反應到說喔你的飲料好了(或沒好)，在處理上是相當的不便捷的。

    所以我們可以比擬成我們就是使用服務的Client端，而老闆娘的腦袋就是所謂的Server端，那Cookie是什麼呢?   Cookie技術是網路時代的快速變遷下所誕生的產物，隨著網路的快速發展，人們需要更複雜的網上交互活動，讓伺服器與客戶端可以保持長久的互連與活動狀態，而這項技術初衷也在瀏覽器的發展時，得到了基礎上的硬用，在1993年時，LouMontulli為了讓用戶在訪問網站時，可以提高訪問速度，並減少現有的人工填寫及個人話應用，而發明了現在被大家廣為人知的Cookie.   早期的概念上Cookie是由Webserver端產生的，作為發送給给User-Agent（一般是瀏覽器端），而當瀏覽器接收到Cookie後，會將其中的key/value，保存到某個路徑內的文本文件之中，讓下次於造訪同一網站時，就可以將Cookie自動發送给WebServer端     從這樣的概念可以知道，Cookie（複數形態為Cookies）是屬於一種小型的文字檔案，透過加密的方式儲存在用戶端（ClientSide）上的資料，一般來說cookie會紀錄用戶的資訊，比較常見的做法是應用在購物車、會員登入或瀏覽紀錄、停留時間等等的，使Webservice可以透過辨別用戶身分，來取得相關的資訊 。

  而正因為他是儲存在我們用戶的本機端，通常可以儲存的地方有兩個：記憶體或硬體內，記憶體是由Browser(瀏覽器)來維護的，通常會在瀏覽器關閉後清除，而各個瀏覽器之間的Cookie是無法相互使用，也就是說對於在同一台電腦上使用Chorme或是Firefox，僅管操作的是同一個人，卻是會認成兩個不一樣的角色，而硬體的Cookie則會有一個保存期限，除非過期或是手動刪除，不然他的儲存時間會較瀏覽器來的長。

  以電子商務網站舉例，因為HTTP的無狀態性，伺服器並不知道使用者在每個頁面跳轉時到底帶入了什麼資訊，而Cookie就是用來繞開HTTP的無狀態性的「額外手段」之一，讓伺服器可以設定或讀取Cookies中所包含資訊，藉此維護使用者在使用服務時，在背景完成並可以持續跟伺服器發送請求以及對談中的狀態。

    而像是登入的應用為例，就是使用者登入一個網站時，伺服器端往往會請求用戶輸入使用者帳號及密碼，並且用戶可以勾選「下次自動登入」，這就是觸發使用Cookie的開關了，如果勾選了，在使用者前一次登入時，伺服器就會傳送了包含登入憑據（使用者名稱加密碼的某種加密形式）的Cookie到使用者的硬碟(或記憶體上)，在之後登入時，只要Cookie尚未到期，瀏覽器會傳送該Cookie給伺服器作驗證憑據，來減少重複登入的輸入行為。

  而Cookie属性除了name（名）和value（值）之外，還有以下四種可選擇的属性，來控制cookie的保存期限，作用網域及安全性：   1.expires:表示Cookie的保存期限，在默認的情況下為暫時性的cookie，只要關閉瀏覽器就會消失   2.path:指定與cookie關連在一起的網頁，默認的狀況下為和當前網頁同一目錄的網頁中有效。

  3.domain:設定cookie有效的網域名稱，可以和path一同設定，讓相同/類似的domain可以享有同樣的cookie   4.secure:算是cookie的安全值，在默認的情況cookie的傳輸上是不安全的，可以通過一個不安全且一般的http，若設置為安全的狀況下，可以讓cookie只在安全的http上進行傳輸       但是其實我們都知道，像是瀏覽記錄也可以算是cookie的一種，許多人員在使用cookie的狀況下，常會造訪一些"安全性"不夠，或是一些不太合法的網站(例如希爾頓娛樂大酒店、澳門最大線上賭場開幕啦~等等)，而這些不僅會有資訊安全上的風險，更是讓隱私曝光，而若使用的又是公司電腦更是滋事體大，而有些廣告公司更事會把一些資訊寫入cookie來達到發送垃圾訊息的目的。

  除上述議題之外，若你的電腦裡有多個瀏覽器，個別在不同空間存放cookie，而若你使用單一瀏覽器卻在不同的電腦上作操作，也會得到不同的cookie訊息，但cookie本身無法準確的區分身分，需要結合Session來作到同步的辨識，才可以有效的作身分上的區分；例如以飲料店點餐為例，Cookie就像是你取號時領到的單據，上面應該還要記載什麼資訊，才能讓領號碼牌叫號、點餐並且取餐的機制作得更為完備，就讓我們在下一章為大家介紹吧！     Cookie嚴謹定義補充(不看也是可以拉) MDN:MozillaWebDocument定義Cookie An HTTPcookie (webcookie,browsercookie)isasmallpieceofdatathataserversendstotheuser'swebbrowser.Thebrowsermaystoreitandsenditbackwiththenextrequesttothesameserver. Typically,it'susedtotelliftworequestscamefromthesamebrowser—keepingauserlogged-in,forexample.Itremembersstatefulinformationforthe stateless HTTPprotocol. 中譯： HTTP(超文本傳輸安全協定)cookie(小餅乾或小型文字檔案)是一段由伺服器送給使用者瀏覽器的一小塊資料。

瀏覽器會儲存它並且在瀏覽器下一次發送要求的時候將它送回原本送來的伺服器。

基本上，它是用來區分兩個要求是來自同一個瀏覽器—以此去保持使用者的登入狀態。

例如，它提供了保存狀態資訊的功能，來幫助HTTP這個無法紀錄狀態的通訊協定。

補充： 雖然HTTP廣泛的運用並且用來做很多神奇的事情，大家都習慣了。

但是HTTP這個通訊協定其實是沒有辦法保留狀態的(這要由TCP開始說起，本文不太探討這個)。

所以光使用HTTP使無法紀錄使用者登入的，必須要外加其他功能才有辦法，其中一個廣泛使用的方式就是使用Cookie。

但是因為Cookie太廣泛使用了，現在只要是使用HTTP就一定會使用Cookie，所以才會造成新手有一種錯覺：“Cookie是HTTP通訊協定所包含的一種功能”。

實際上，比較準確的說法應該是：“Cookie是一種可以跟HTTP一起使用的功能，並且被廣泛使用”。

它多半是使用HTTPRequest的Header區塊來實作。

  最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!! 圖文系列教學: 不是工程師也可以看得懂的程式名詞解說！ [不是工程師]Cookie是文檔還是餅乾？簡述HTTP網頁紀錄會員資訊的一大功臣。

[不是工程師]會員系統用Session還是Cookie?你知道其實他們常常混在一起嗎？ [不是工程師]讓網站速度飛快的秘密，你了解什麼是網頁快取(Cache)嗎? [不是工程師]差一個字差很多，HTTP不等於HTTPS [不是工程師]你的網站被顯示為不安全嗎？安裝SSL憑證前你可能會想知道的事! [不是工程師]為何HTTPS憑證有貴有便宜還更可以免費？讓我們從CA原理開始講起。

[不是工程師]架站用VPS還是WebHosting，中文翻譯都有「虛擬」到底差在哪？ 「不是工程師」外鍵Foreignkey(FK)是什麼？從第二正規化(2NF)去除冗余資料談起吧！(databasenormalization) 「不是工程師」後端服務的根基，淺談SQL關連式資料庫RDBMS 「不是工程師」可以邏輯推斷出來就不要多加欄位？淺談資料庫第三正規化(3NF) Android系統誰不認識呢？簡述Android開發與入門一些該知道的事 [不是工程師]在想網站用怎樣的網域名稱(DomainName)嗎？不妨從行銷面來看吧! [不是工程師]物件導向設計原則(SOLID)很繞口？試試從模組化開發與測試來理解吧！ 「不是工程師」關聯式資料庫正規化是什麼?先從第一正規化(1NF)開始吧！(databasenormalization,PrimaryKey-PK) Node.js是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？ 什麼是前端工程師(FrontendDeveloper)？要成為前端工程師要學習什麼樣的技術呢？ [不是工程師]休息(REST)式架構?寧靜式(RESTful)的WebAPI是現在的潮流？ VincentKe 喜歡把混亂的事情變的簡單 用嘴巴做事其實很可以 但要結合靈活的腦袋思考 就一起來拆解吧 關聯文章 已經進入SaaS/PaaS/IaaS時代已久，還在用舊時代想法規劃網站嗎？ 別急著慌張，說不定您的服務已自然順著潮流成為其中的一份子了呢！ 使用者體驗與外觀(UIUX)是產品成功的關鍵？核心價值可能才是你該先思考的地方 淺談超脫設計之外的產品價值，UIUX在一開始真的那麼重要嗎？ [不是工程師]架站用VPS還是WebHosting，中文翻譯都有「虛擬」到底差在哪？ 睡通舖還是住套房?你的網站適合用「虛擬主機」還是「虛擬伺服器」呢? 網站改版是好還是壞？當心SEO雪崩襲來！ 內容精進當然是不錯，不過一次整頁換掉？在做之前可能要多考慮一下喔！ [GoDaddy]繁體中文版網站帳號註冊教學~網域註冊及主機代管服務 本文要介紹如何在全球知名的網域註冊及主機代管服務商【GoDaddy】繁體中文版網站上註冊帳號 使用者體驗與外觀(UIUX)是產品成功的關鍵？核心價值可能才是你該先思考的地方 淺談超脫設計之外的產品價值，UIUX在一開始真的那麼重要嗎？ 架設一個企業形象網站需要考慮哪些部分呢？讓我們來列舉告訴你吧！ 在網路的時代，無論是否是電商都應該至少要架設一個企業形象網站 [WordPress][Mac]01.開始利用MAMP設定WordPress開發環境 上一篇我們已經使用MAMP讓PHP跑起來，本篇我們要直接讓完整的WordPress跑起來。

Node.js是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？ 後端用其他程式語言也要略懂Node.js?無所不在的JavaScript你最好要先暸解！ 免費的網路架站空間-Heroku 想要擁有一個真正的網站來展現學習成果給朋友家人看嗎？用Heroku就對了！！ 顯示全部 最新文章 [LayerStack]完整LinuxVPS使用PM2與Nginx架設Node.js站台設定中文教學 使用LayerStackVPS透過CN2GIA最高級線路，讓網站在中國大陸也可順暢連線 桌面太小被電腦螢幕佔據嗎？Ultrarm螢幕支架應該就是你要的推薦方案喔！扎實用料一次到位。

台灣公司Ultrarm螢幕支架相當堅固可以一次架兩個螢幕，最高支援49"吋螢幕。

如何避免自製WordPress外掛被GPL授權？顧客購買「付費版」可以免費無限複製不用付授權費嗎？ 開不開源是個人選擇，豐富社群當然是件好事。

但是被強迫開源就不是開發者所樂見的事了。

【微創業】電商為何要自架站台？被平台綁架的下場只有流量營業額減半等著你-自架站台的重要性(二) 我電商就賺飽了，為何要架設一個網站？架設網站一定要用WordPress嗎？ 【IKoula】使用LinuxVPS上架設PHP站台全紀錄！從Ubuntu設定到網站上線一次搞定 經濟實惠的IKoulaVPS，適合初學者練習與進階商業架站的好選擇！ 後端工程師(BackendDeveloper)是什麼？成為後端需要學習什麼技術？很難嗎？ 前端與後端差別在哪？如何選擇？為何後端工程師也要學習基礎「前端」技術？ 想快速保障網站安全？快嘗試SucuriCDNWAF雲端應用防火牆！遠振代理台灣專業服務協助設定。

架站不會程式？WordPress被入侵？使用SucuriCDNWAF以銅板價格讓你一天內就確保網站安全！ WordPress推薦必裝外掛(一)，精選常用Plugins超好用清單，免費實用外掛絕不能錯過！ WordPress外掛這麼多種，先從免費實用外掛開始，這些是即使會寫程式也很方便的外掛 網站電商如同實體店面，盲目跟風設計真的好嗎？讓我們來介紹UI、UX的重要性 Ikea如迷宮版的賣場動線、全聯呈現多樣商品的壅擠成列都有他們的原因，你的網站設計概念為何？ 純網銀是有多【純】?與傳統銀行的數位銀行又有什麼差異呢？ 這批很「純」！淺談來勢兇兇的「純網銀」！ 顯示全部 線上課程 Bootstrap5與Sass，製作RWD客製化響應式網站 Laravel後端PHP架站，APIServer與訂閱軟體全攻略 WordPress-從頭教起的網站架設 程式客製WooCommerce，WordPress購物系統全解析 iOS-Swift5手機程式開發，使用APP與網站互動 Electron跨平台桌面程式，建立點餐系統與裝置控制 C語言-近代程式語言的基礎 ES6,ReactJS與Webpack，前端JavaScript全攻略 從零開始的SQL語法與資料庫設計-以MySQL來攻略 Linux雲端伺服器，用AWS暸解Apache與Nginx HTML,CSS,JavaScript,jQuery網頁從零開始 Git程式版本管控-由簡單到難 快速開發，從頭教起的RubyonRails後端之旅 行動第一!使用Bootstrap建立響應式RWD網站!