本地存儲慷丽，即在用戶瀏覽器中將數(shù)據(jù)保存在本地奏甫。
以下是常用的前端數(shù)據(jù)存儲的幾種方式：
- cookie
- session
- localStorage（本地存儲）
- sessionStorage（會話存儲）
一、cookie和session
cookie和session的區(qū)別
- 保存狀態(tài)：
cookie保存在瀏覽器端
session保存在服務(wù)器端 - 存儲內(nèi)容：
cookie只能保存字符串類型、以文本的方式存儲
session通過類似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來保存，能支持任何類型的對象（session中可含有多個對象） - 存儲的大心婧Α：
單個cookie保存的數(shù)據(jù)不能超過4kb头镊，很多瀏覽器都限制一個站點最多保存20個cookie
session大小沒有限制 - 安全性：
cookie是以文明方式存放在客戶端（針對友好性來講），但是安全性較差（可以通過加密后存放）
session是存放在服務(wù)器端的內(nèi)存中魄幕，所以安全性較好 - 生命周期：
cookie是累計時間
session是間隔時間 - 應(yīng)用場景：
cookie：
（1）判斷用戶是否登錄過該網(wǎng)站相艇，如果未登錄過則保存登錄信息，下次登錄時自動登錄纯陨；如果已保存過該用戶登錄信息坛芽，則直接自動登錄
（2）保存上次登錄的時間等信息
（3）保存上次查看的頁面
（4）瀏覽計數(shù)
session:
Session用于保存每個用戶的專用信息，變量的值保存在服務(wù)器端翼抠，通過SessionID來區(qū)分不同的客戶咙轩。
（1）網(wǎng)上商城中的購物車
∫跤薄（2）保存用戶登錄信息
』詈啊（3）將某些數(shù)據(jù)放入session中，供同一用戶的不同頁面使用
”旄恰（4）防止用戶非法登錄
缺點：
cookie：
（1）大小受限
（2）安全性較低
（3）cookie數(shù)據(jù)有路徑（path）的概念胧弛，可以限制cookie只屬于某個路徑下尤误。
session：
（1）Session保存的東西越多侠畔，就越占用服務(wù)器內(nèi)存，對于用戶在線人數(shù)較多的網(wǎng)站损晤，服務(wù)器的內(nèi)存壓力會比較大软棺。
（2）依賴于cookie（sessionID保存在cookie），如果禁用cookie尤勋，則要使用URL重寫喘落，不安全
（3）創(chuàng)建Session變量有很大的隨意性，可隨時調(diào)用最冰，不需要開發(fā)者做精確地處理瘦棋，所以，過度使用session變量將會導(dǎo)致代碼不可讀而且不好維護暖哨。
二赌朋、localStorage和sessionStorage
HTML5的WebStorage提供了兩種API：
localStorage：本地存儲
sessionStorage：會話存儲
localStorage和sessionStorage的區(qū)別
- 生命周期：
localStorage：生命周期是永久的，關(guān)閉頁面或瀏覽器之后localStorage中的數(shù)據(jù)也不會消失篇裁。localStorage除非主動刪除數(shù)據(jù)沛慢，否則數(shù)據(jù)永遠(yuǎn)不會消失。
sessionStorage的生命周期是僅在當(dāng)前會話下有效达布。 - 存儲大型偶住：
localStorage和sessionStorage的存儲數(shù)據(jù)大小一般都是：5MB - 存儲位置：
localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進行交互通信黍聂。 - 存儲內(nèi)容類型：
localStorage和sessionStorage只能存儲字符串類型躺苦，對于復(fù)雜的對象可以使用JavaScript提供的JSON對象的stringify和parse來處理 -
獲取方式：
- 應(yīng)用場景：
localStoragese：常用于長期登錄（+判斷用戶是否已登錄）身腻，適合長期保存在本地的數(shù)據(jù)。
sessionStorage：敏感賬號一次性登錄匹厘；
對比表（都屬于客戶端）
![]()
13835161-5d088df9e15dbc0c.png
實驗：
頁面一：a:"111"
localStorage.setItem('a',this.a)
頁面二：a:"222"
localStorage.setItem('a',this.a)
