文章目錄
- Cookie
-
- Cookie介紹
- Cookie容量限制
- Cookie基本操作
-
- 寫入Cookie
- 讀取Cookie
- Cookie屬性
-
- Name（名）、Value（值）
- Expires、Max-Age(失效時間)
-
- Expires
- Max-Age
- Domain（域）、Path(路徑)
-
- Domain
- Path
- HttpOnly
- Secure
- localStorage
-
- localStorage介紹
- localStorage存儲期限
- localStorage基本操作
-
- 寫入資料
- 查詢資料
- 删除資料
- 清空localStorage
- sessionStorage
-
- sessionStorage介紹
- sessionStorage存儲期限
- sessionStorage基本操作
- cookie、localStorage、sessionStorage的差別
Cookie
Cookie介紹
Cookie全程 HTTP Cookie ，簡稱 Cookie。它是浏覽器存儲資料的一種方式，一般會自動随着請求發送到伺服器；
有的網站會利用Cookie跟蹤統計使用者的習慣，比如：通路時間，通路哪些頁面，頁面停留時間等；
Cookie是公開透明的，不要用Cookie存儲密碼等敏感資訊；
Cookie容量限制
單個Cookie容量為4k，不同浏覽器Cookie個數各不相同一般設定20個沒有問題；
IE6及以下每個域名最多包含20個Cookie；
IE7及以上每個域名最多50個Cookie；
Firefox每個域名最多50個Cookie；
Opera下每個域名最多30個Cookie；
Sarafi和Chrome對每個域的Cookie數目沒有嚴格限制。
Cookie基本操作
寫入Cookie
通過
document.cookie
設定Cookie，不支援一次設定多個Cookie，隻能一個一個的設定；
讀取Cookie
讀取也通過
document.cookie
，讀取全部Cookie；
讀取的是由名值對構成的字元串，每個名值對之間由
;
(一個分号和一個空格) 分隔；
Cookie屬性
Name（名）、Value（值）
Name、Value是建立Cookie時必須填寫的，其他屬性不寫為預設值；
Name、Value如果包含非英文字元，寫入需要使用
encodeURIComponent()
編碼，讀取需要使用
decodeURIComponent()
解碼；
Expires、Max-Age(失效時間)
未設定Expires、Max-Age的cookie為會話cookie，它存在記憶體中，當會話結束即關閉浏覽器時清除cookie；
設定Expires、Max-Age屬性的cookie到期後會被清除；
Expires
expires值為Date類型，表示具體什麼時間過期；
Max-Age
max-age值為數字，表示過多少秒後失效；
如果max-age值為0 或 負數這直接清除cookie；
Domain（域）、Path(路徑)
Domain
Domain限制了cookie的通路範圍；
js隻能讀寫目前域或父域的cookie，不能讀寫其他域的cookie;
www.aaaa.com 和 m.aaaa.com 的父域為 .aaaa.com
Path
Path限制了cookie的通路範圍(同一域名下)；
js隻能讀寫目前路徑或上級路徑的cookie，不能讀寫其他路徑的cookie;
Name、Domain、Path三個字段都相同時，才是同一個cookie；
HttpOnly
如果這個cookie設定了httponly屬性，則這個cookie不能通過用戶端通路；
Secure
Secure限定了隻有使用https協定，才能将cookie發送到伺服器端；
Domain、Path、Secure都滿足其未過期的cookie才會随着請求發送到伺服器端；
localStorage
localStorage介紹
localStorage也是浏覽器存儲資料的一種方式，它隻存在于浏覽器，不會發送到伺服器端；
單個域名下localStorage總大小為5M ；
localStorage存儲期限
localStorage是持久化的本地存儲，除非手動清除（通過js清除、清浏覽器緩存等），否則永久有效；
localStorage基本操作
寫入資料
使用
setItem()
方法，向localStorage中寫入資料；
key相同，後面資料會對前面的資料進行覆寫；
查詢資料
使用
getItem()
方法，可以通過key查詢存儲在localStorage中的value值；
查詢不存在的key，傳回null;
删除資料
使用
removeItem()
方法，可以通過key删除存儲在localStorage中的value值；
删除不存在的key，不報錯;
清空localStorage
使用
clear()
方法，可以清空localStorage;
sessionStorage
sessionStorage介紹
sessionStorage也是浏覽器存儲資料的一種方式，它隻存在于浏覽器，不會發送到伺服器端；
sessionStorage與localStorage除存儲期限不同外，其他用法一緻；
sessionStorage存儲期限
當會話結束（比如關閉浏覽器）時，sessionStorage中資料會被清空；
sessionStorage基本操作
同localStorage；
cookie、localStorage、sessionStorage的差別
-
cookie會在伺服器和浏覽器之間傳遞。localStorage和sessionStorage不會發給伺服器，僅在本
地儲存;
- cookie存儲資料小，不超過4k。localStorage和sessionStorage存儲一般在5MB左右;
- cookie可以設定有效期；localStorage是持久化的本地存儲，除非手動清除否則永久有效；sessionStorage在關閉視窗或者浏覽器時會被删除;
- cookie和localStorage在同源視窗中是共享的，sessionStorage在不同的視窗中不能共享;