js基礎篇 cookie使用要點

2021-07-10 08:38:45 字數 2919 閱讀 4630

1.cookie數量和長度的限制。各個瀏覽器的限制不同ie7+和firefox最大限制為50條,chrome和safari無限制,ie6-最大限制20條。且所有瀏覽器限制每個cookie長度不能超過4kb,否則會被截掉。

所以:現代瀏覽器cookie個數不要超過50條,大小不能超過4kb;簡而精。

2.安全性問題。客服端每次訪問服務端都會攜帶cookie,cookie容易被人攔截,所有的session資訊被公開。即使加密也與事無補,因為攔截者並不需要知道cookie的意義,他只要原樣**cookie就可以達到目的了。

所以:cookie不要儲存機密資訊,讓服務端來確保使用者資訊保安。

3.關於cookie的編碼。原來的cookie編碼大多使用escape和unescape進行編譯碼,這個編譯碼針對普通字母和數字以及*,+,-,.,/,@,_以外的其他字元,可以說是比較簡單粗暴的。後來ecmascript v3 已從標準中刪除了escape進行編碼,分解成了encodeuri(針對url風格進行編碼)和 encodeuricomponent(針對url風格編碼加上uri 元件的標點符號進行編碼,比encodeuri要編碼的字元更多)。一般來說cookie編碼只需要能對"="和";"進行編碼即可。

所以在不能使用escape的情況下使用encodeuricomponent編碼,decodeuricomponent解碼。

4.cookie每次隨http請求一起傳送,浪費寬頻,移動端推薦使用localstorage。

5.使用方法

document.cookie = encodeuricomponent(name) + "=" + encodeuricomponent(value)

每執行一次上面的**就會新增乙個cookie,如果cookie中已經存在相同name的cookie則完全覆蓋(這裡的覆蓋不僅僅只value值的覆蓋,指的是覆蓋一切當前name對應的cookie資訊,比如失效時間expires屬性、path屬性等等)。

一次只能新增乙個cookie,除了第乙個key/value對被認為是cookie值儲存外,其他key/value對被認為是該cookie的屬性。比如

document.cookie = "name=chua;expires="+(new date("2016/1/6 11:44:30")).togmtstring();

上面的**被解釋為cookie name在2016/1/6 11:44:30到期的

document.cookie = "name=chua;age=12";

上面的**解釋為新增了乙個cookie name=chua。這個cookie有乙個屬性age=12。但是很明顯,age在cookie中沒有意義。因為cookie除了本身的鍵和值能獲取到,他相關的屬性無法讀取,只有瀏覽器知道。

現在來說說cookie的幾個屬性(不詳細講,主要是使用的注意事項):

expires:絕對失效時間,時間格式只支援gtm標準時間,所有瀏覽器都支援

預設情況下cookie是暫時存在的,他們儲存的值只在瀏覽器會話期間存在,當使用者退出瀏覽器後這些值也會丟失;如果指定 expires 值,那麼如果在時間沒有過期的情況下cookie始終存在,即使關閉瀏覽器、關閉電腦。例子

document.cookie = "name=chua;expires="+(new date("2016/1/6 11:44:30")).togmtstring();

max-age:相對失效時間,格式是數字,單位秒

說是expires現在已經被max-age屬性所取代,但是實際上本人測試至少ie是不支援max-age的。所以,max-age的使用範圍就只能說抱歉了。max-age和expires這兩個屬性控制cookie生命週期。 如果兩個都設定了,以max-age為準

path:指定與cookie關聯在一起的網頁

在預設的情況下cookie會與建立它的網頁,該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯

domain:指定共享該cookie的域,只能是乙個域內多個伺服器共享cookie

domain屬性可以使多個web伺服器共享cookie。domain屬性的預設值是建立cookie的網頁所在伺服器的主機名。不能將乙個cookie的域設定成伺服器所在的域之外的域。

news.baidu.com的伺服器能夠讀取www.baidu.com設定的cookie值。如果www.baidu.com的頁面建立的cookie把自己的path屬性設定為「/」,把domain屬性設定成「.baidu.com」,那麼所有位於www.baidu.com,以及位於baidu.com域的其他伺服器上的網頁都可以訪問這個cookie。

secure:布林值,傳輸型別(安全傳輸false/不安全傳輸true),預設是不安全傳輸

它是乙個布林值,指定在網路上如何傳輸cookie,預設是不安全的,通過乙個普通的http連線傳輸

httponly:設為true後,只能通過http訪問,不能通過document.cookie獲取。設定為httponly的鍵值,防止xss讀取cookie。

簡易cookie讀取函式

function

getcookie(c_name)

} return ""}

function

setcookie(c_name,value,expiredays)

JS基礎 Cookie與儲存

一 cookie是什麼 cookie 是一種客戶端 瀏覽器 把使用者資訊以檔案形式儲存到本地硬碟的技術,說白了就是一種 瀏覽器技術 二 cookie的作用 cookie的作用很單一,就是 儲存客戶資料 儲存資料的檔案叫cookie檔案 三 cookie與變數的區別 變數 資料是儲存到記憶體中的,是一...

JS基礎語法篇

2 內部js 寫在script標籤裡面!3 外部js 需要script標籤引入 使用src屬性 彈出窗 alert 123 控制台列印 console.log 321 寫入頁面,但是會重繪頁面!document.write 1122 彈出輸入框 let num prompt 請輸入什麼?var a ...

js中cookie的使用

cookie cookie 的形態 a 100 b 200 c 300 儲存大小有限制,一般是 4 kb 左右 數量有限制,一般是 50 條左右 有時效性,也就是有過期時間,一般是會話級別 也就是瀏覽器關閉就過期了 有網域名稱限制,也就是說誰設定的誰才能讀取 讀取 cookie 的內容使用docum...