前端存儲之Cookie、Session、localStorage、sessionStorage

Cookie

什麼是cookie?
Cookie是由服務器端生成,發送給瀏覽器,瀏覽器自動會將Cookie以key/value保存到某個目錄下的文本文件內,下次請求同一網站時也會自動發送該Cookie給服務器(添加在HTTP請求頭部)。

cookie有什麼特點?
①可以通過 expires 、max-age來設置有效期(不設置默認臨時存儲)
document.cookie = 'expires=時間/max-age=秒'
②不可跨域名 不同域名之間不可訪問各自cookie
③cookie內存大小限制爲4K
④cookie是不安全的
⑤字符串形式存儲

如何使用cookie?
①設置
document.cookie = 'username=xxx;userid=yyy'
②獲取
var value = document.cookie
③刪除
設置expires小於當前時間即可

Session

什麼是session?
Session 代表着服務器和客戶端一次會話的過程。Session 對象存儲特定用戶會話所需的屬性及配置信息。這樣,當用戶在應用程序的 Web 頁之間跳轉時,存儲在 Session 對象中的變量將不會丟失,而是在整個用戶會話中一直存在下去。當客戶端關閉會話,或者 Session 超時失效時會話結束。

Session有什麼特點?
①存儲在服務器端
②有效期短 客戶端關閉或者超時都會失效
③存儲容量遠大於Cookie

Session和Cookie有什麼關聯呢?
用戶第一次請求登錄服務器的時候,服務器根據用戶提交的相關信息,創建創建對應的 Session ,請求返回時將此 Session 的唯一標識信息 SessionID 返回給瀏覽器,瀏覽器接收到服務器返回的 SessionID 信息後,會將此信息存入到 Cookie 中,同時 Cookie 記錄此 SessionID 屬於哪個域名。
第二次訪問時,發送請求之前瀏覽器會自動判斷此域名下是否存在 Cookie 信息,如果存在自動將 Cookie 信息也發送給服務端,服務端會從 Cookie 中獲取 SessionID,再根據 SessionID 查找對應的 Session 信息,如果沒有找到說明用戶沒有登錄或者登錄失效,如果找到 Session 證明用戶已經登錄可執行後面操作。

localStorage

什麼是localStorage?
localStorage是HTML5新加的一個特性,用來作爲本地存儲使用,解決了Cookie存儲不足的限制,localStorage一般限制爲5M。不同於Cookie的是,localStorage不會和請求數據一起發送到服務器端。

localStorage有什麼特點?
①需要高版本的瀏覽器才支持
②字符串形式存儲
③在瀏覽器隱私模式下不可讀取
④不能被爬蟲抓取到
⑤永久性存儲 除非手動刪除,否則關閉瀏覽器下次打開仍然存在

如何使用localStorage?
①設置
localStorage.setItem(key, value) //鍵值對
localStorage.key = value
localStorage['key'] = value
②獲取
localStorage.getItem(key)
var value = localStorage.key
var value = localStorage['key']
③刪除
localStorage.clear() //刪除所有鍵值對
localStorage.removeItem(key) //刪除指定鍵值對
④其他
localStorage.length //獲取鍵值對數量
localStorage.key(index) //獲取當前索引的鍵值對的鍵值名稱 結合length可以遍歷鍵值對

sessionStorage

什麼是sessionStorage?
sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據,在關閉窗口或標籤頁之後將會刪除這些數據。

如何理解一個session?
sessionStorage的session僅限當前標籤頁或者當前標籤頁打開的新標籤頁,通過其它方式新開的窗口或標籤不認爲是同一個session。

sessionStorage有什麼特點?
①字符串形式存儲
②會話結束即被自動清除
③高版本瀏覽器支持

如何使用sessionStorage?
①設置
sessionStorage.setItem(key, value) //鍵值對
sessionStorage.key = value
sessionStorage['key'] = value
②獲取
sessionStorage.getItem(key)
var value = sessionStorage.key
var value = sessionStorage['key']
③刪除
sessionStorage.clear() //刪除所有鍵值對
sessionStorage.removeItem(key) //刪除指定鍵值對
④其他
sessionStorage.length //獲取鍵值對數量
sessionStorage.key(index) //獲取當前索引的鍵值對的鍵值名稱 結合length可以遍歷鍵值對

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章