JS 中 cookie 的使用

成都朗沃教育-9.9元預科課程

成都Web前端培訓

1、cookie 是什么?

①、cookie 是存儲于訪問者計算機中的變量。每當一臺計算機通過瀏覽器來訪問某個頁面時,那么就可以通過 JavaScript 來創建和讀取 cookie。

②、實際上 cookie 是存于用戶硬盤的一個文件,這個文件通常對應于一個域名,當瀏覽器再次訪問這個域名時,便使這個cookie可用。因此,cookie可以跨越一個域名下的多個網頁,但不能跨越多個域名使用。

③、不同瀏覽器對 cookie 的實現也不一樣。即保存在一個瀏覽器中的 cookie 到另外一個瀏覽器是 不能獲取的。

PS:cookie 和 session 都能保存計算機中的變量,但是 session 是運行在服務器端的,而客戶端我們只能通過 cookie 來讀取和創建變量

2、cookie 能做什么?

①、用戶在第一次登錄某個網站時,要輸入用戶名密碼,如果覺得很麻煩,下次登錄時不想輸入了,那么就在第一次登錄時將登錄信息存放在 cookie 中。下次登錄時我們就可以直接獲取 cookie 中的用戶名密碼來進行登錄。

PS:雖然 瀏覽器將信息保存在 cookie 中是加密了,但是可能還是會造成不安全的信息泄露

②、類似于購物車性質的功能,第一次用戶將某些商品放入購物車了,但是臨時有事,將電腦關閉了,下次再次進入此網站,我們可以通過讀取 cookie 中的信息,恢復購物車中的物品。

PS:實際操作中,這種方法很少用了,基本上都是將這些信息存儲在數據庫中。然后通過查詢數據庫的信息來恢復購物車里的物品

③、頁面之間的傳值。在實際開發中,我們往往會通過一個頁面跳轉到另外一個頁面。后端服務器我們可以通過數據庫,session 等來傳遞頁面所需要的值。但是在瀏覽器端,我們可以將數據保存在 cookie 中,然后在另外頁面再去獲取 cookie 中的數據。

PS:這里要注意 cookie 的時效性,不然會造成獲取 cookie 中數據的混亂。

3、怎么使用 cookie?

①、語法

document.cookie = "name=value;expires=evalue; path=pvalue; domain=dvalue; secure;”

②、對各個參數的解釋

一、name=value 必選參數

這是一個鍵值對,分別表示要存入的 屬性 和 值。

比如:

成都Web前端培訓

二、expires=evalue 可選參數

該對象的有效時間(可選)只支持GTM 標準時間,即要將時間轉換,toUTCString()(默認為當前瀏覽器會話有用,關閉瀏覽器就消失);

比如:

成都Web前端培訓

三、path=pvalue 可選參數

限制訪問 cookie 的目錄,默認情況下對于當前網頁所在的同一目錄下的所有頁面有效

四、domain=dvalue 可選參數

用于限制只有設置了的域名才可以訪問;如果沒有設置,則默認在當前域名訪問

比如設置 test*.com 表示域名為test*.com的服務器共享該Cookie

五、secure=true|false 可選參數,默認是 true 不安全傳輸

安全設置,指明必須通過 安全的通信通道來傳輸(https) 才能獲得 cookie,true 不安全,默認值;false 安全,必須通過 https 來訪問

比如:如果你設置 document.cookie = "name=vae;secure"

上面的代碼如果是在 http 的協議中訪問,那么是訪問不了的

成都Web前端培訓

注意:

(1)cookie可能被禁用。當用戶非常注重個人隱私保護時,他很可能禁用瀏覽器的cookie功能;

(2)cookie是與瀏覽器相關的。這意味著即使訪問的是同一個頁面,不同瀏覽器之間所保存的cookie也是不能互相訪問的;

(3)cookie可能被刪除。因為每個cookie都是硬盤上的一個文件,因此很有可能被用戶刪除;

(4)cookie安全性不夠高。所有的cookie都是以純文本的形式記錄于文件中,因此如果要保存用戶名密碼等信息時,最好事先經過加密處理。

(5)cookie 在保存時,只要后面保存的 name 相同,那么就會覆蓋前面的 cookie,注意是完全覆蓋,包括失效時間,path 等等

點擊知道更多編程知識

文章來源于網絡

成都朗沃教育-專注IT培訓

文章來自:成都朗沃教育  原創文章,轉載請注明出處!

文章標題:JS 中 cookie 的使用

永久鏈接:http://www.xiyucn.net/tech/4443.html

咨詢課程 免費獲取資料 聯系老師
<strike id="5rn99"><dl id="5rn99"><del id="5rn99"></del></dl></strike><strike id="5rn99"><i id="5rn99"></i></strike>
<th id="5rn99"><dl id="5rn99"><ruby id="5rn99"></ruby></dl></th><strike id="5rn99"></strike><span id="5rn99"><dl id="5rn99"></dl></span>
<strike id="5rn99"><dl id="5rn99"><del id="5rn99"></del></dl></strike>
<span id="5rn99"></span><strike id="5rn99"></strike>
<strike id="5rn99"><dl id="5rn99"></dl></strike><span id="5rn99"><dl id="5rn99"></dl></span>
<strike id="5rn99"></strike><strike id="5rn99"><dl id="5rn99"></dl></strike>
<span id="5rn99"></span>
<strike id="5rn99"><i id="5rn99"></i></strike>
<strike id="5rn99"></strike>
<ruby id="5rn99"></ruby>
<span id="5rn99"></span>
<span id="5rn99"></span>
<strike id="5rn99"></strike><ruby id="5rn99"></ruby>
<span id="5rn99"><video id="5rn99"><ruby id="5rn99"></ruby></video></span>
<span id="5rn99"><dl id="5rn99"></dl></span>
<span id="5rn99"></span>
<strike id="5rn99"><i id="5rn99"></i></strike>
<strike id="5rn99"></strike><ruby id="5rn99"><i id="5rn99"><cite id="5rn99"></cite></i></ruby>
<strike id="5rn99"></strike>
<ruby id="5rn99"></ruby><strike id="5rn99"></strike>
五月天开心激情网