cookie, sessionStorage, localStorage

小呆瓜coco 發表於 2018-04-02
Cookie localStorage

自我學習記錄(一直會更新?)

三者的基本特徵

特徵 cookie localstorage sessionStorage
有效時間 會話cookie:不設定它的生命週期expires時的狀態,瀏覽器的開啟到關閉就是一次會話,當關閉瀏覽器時,會話cookie就會跟隨瀏覽器而銷燬。當關閉一個頁面時,不影響會話cookie的銷燬。會話cookie就像我們沒有辦理積分卡時,單一的買賣過程,離開之後,資訊則銷燬。 ②持久cookie:設定了它的生命週期expires,此時,cookie像商品一樣,有個保質期,關閉瀏覽器之後,它不會銷燬,直到設定的過期時間。對於持久cookie,可以在同一個瀏覽器中傳遞資料,比如,你在開啟一個淘寶頁面登陸後,你在點開一個商品頁面,依然是登入狀態,即便你關閉了瀏覽器,再次開啟瀏覽器,依然會是登入狀態。這就是因為cookie自動將資料傳送到伺服器端,在反饋回來的結果。持久cookie就像是我們辦理了一張積分卡,即便離開,資訊一直保留,直到時間到期,資訊銷燬。 資料永久性:即一旦賦值,不管多長時間值都是存在的,除非手動清除否則永久儲存 引入了一個瀏覽器視窗的概念,①當前瀏覽器視窗沒有關閉,即使重新整理頁面或者進入同源頁面,資料仍然存在。②關閉視窗後,資料即銷燬。③同時開啟獨立的不同的掘金頁面,sessionStorage物件也是不一樣的。
儲存大小 不能超過4KB 一般5MB,或者更大 一般5MB,或者更大
與伺服器端通訊 資料始終在同源的http請求中攜帶(即使不需要),即會在瀏覽器和伺服器間來回傳遞 不會自動把資料發給伺服器,僅在本地儲存 不會自動把資料發給伺服器,僅在本地儲存

1.cookie的使用

js-cookie js-cookie的詳細使用方法看github
npm install js-cookie --save

js建立cookie
document.cookie='name=mm' 
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT' 
// expires引數 新增過期的時間(UTC、GMT時間)
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /;'
// path引數 告訴瀏覽器 cookie 的路徑。預設情況下,cookie 屬於當前頁面。
document.cookie = 'name= 11212; expires = Thu, 18 Dec 2019 12:00:00 GMT; path = /; domain=.juejin.im'
複製程式碼
js讀取cookie
function getItem(_name) {
	var _cookie = document.cookie.split('; ')
	for(let i = 0; i < _cookie.length; i++) {
		var arr = _cookie[i].split('=')
		if (arr[0] === _name) {
			return arr[1]
		}
	}
}
getItem('name')
複製程式碼
js刪除cookie

將cookie的時間設定成已經過期的時間

2.sessionStorage的使用

sessionStorage.setItem('name', 'mm')
var cat = sessionStorage.getItem('name')
sessionStorage.removeItem('name')
sessionStorage.clear()
複製程式碼

3.localStorage的使用

localStorage.setItem('name', 'mm')
var cat = localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.clear()
複製程式碼
名詞註解:(?有可能理解錯誤,請指正)

1.同源: 在生物學種系發生理論中,若兩個或多個結構具有相同的祖先,則稱它們同源