cookie, sessionStorage, localStorage

小呆瓜coco發表於2018-04-02
CookieSession

自我學習記錄（一直會更新?）

三者的基本特徵

特徵 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.同源： 在生物學種系發生理論中，若兩個或多個結構具有相同的祖先，則稱它們同源

相關文章