1.請(qǐng)描述一下cookie，sessionStorage 和 localStorage 的區(qū)別

區(qū)別容量是否攜帶到ajax中API易用性

cookie	4k	是	需要自己封裝，麻煩
sessionStorage	5M	否（只作為存儲(chǔ)來用）	getItem setItem
localStorage	5M	否（只作為存儲(chǔ)來用）	getItem setItem

1.html5出來之前到html5一個(gè)標(biāo)準(zhǔn)的過渡，html5沒出來之前cookie是最為本地存儲(chǔ)的一個(gè)方法； 2.html5出來之后有sessionStorage 和localStorage這兩個(gè)api可以作為本地存儲(chǔ)。 3.ie低版本的淘汰，多少年還沒有淘汰干凈，cookie本地存儲(chǔ)的功能還會(huì)一直存在，只不過比例越來越小了；sessonStorage 和localStorage本地存儲(chǔ)的功能慢慢應(yīng)用到各個(gè)新的地方，慢慢的把cookie取代。 （cookie不是sessionStorage和localStorage被取代就沒了，本身還有另外的功能）

Cookie

1.本身用于客戶端和服務(wù)器端通信

2.但是它有本地存儲(chǔ)的功能，于是就被“借用”**

--html5出來之后雖然有sessionStorage和localStorage這種新的api，但是cookie本身的功能是不會(huì)變的,cookie一直會(huì)有,一直會(huì)作為客戶端和服務(wù)器端通信的一種方式。它有本地存儲(chǔ)的能力，但是有沒有其 他方式能做的多，只好被借用。

3.使用document.cookie = ...獲取和修改即可**

--用的時(shí)候比較麻煩，因?yàn)閏ookie就是一個(gè)字符串，在本地存儲(chǔ)的時(shí)候，你得是key-value對(duì)象的形式存儲(chǔ)，不能光存一個(gè)信息。所有的服務(wù)器端的請(qǐng)求（發(fā)ajax，請(qǐng)求一個(gè)頁(yè)面,一個(gè)js、css文件、一個(gè)圖片）,都會(huì)把cookie帶進(jìn)去，所有它是一個(gè)客戶端和服務(wù)器端通信的一個(gè)工具，一個(gè)協(xié)議，一個(gè)條款，但是它又有本地存儲(chǔ)的能力。

*cookie用于存儲(chǔ)的缺點(diǎn)：(可設(shè)置失效時(shí)間，默認(rèn)是關(guān)閉瀏覽器后失效)

1.存儲(chǔ)量太小，只有4KB;

（因?yàn)樗獢y帶到請(qǐng)求中去和服務(wù)器端通信，每次請(qǐng)求3-5M，不說慢，如果手機(jī)用流量很快就沒了）

2.所有http請(qǐng)求都帶著，會(huì)影響獲取資源的效率;

（如果太多每次請(qǐng)求都帶著，會(huì)效率很低）

3.API簡(jiǎn)單，需要封裝才能用 document.cookie =...;

(作為存儲(chǔ)來說，不可能只存一個(gè)東西，如果用戶名存什么，密碼存什么(密碼加密))，如果本地存儲(chǔ)當(dāng)中的應(yīng)用，比如存?zhèn)€城市名，性別是什么，姓名是什么這些，你要存好多好多的數(shù)據(jù)，怎么通過一個(gè)字符串解決呢，需要拆解封裝的，所以cookie用起來特別麻煩）

localStorage 和 sessionStorage：

1.html5專門為存儲(chǔ)而設(shè)計(jì)，最大容量5M

不用在請(qǐng)求中帶著，請(qǐng)求中該帶不會(huì)帶多，cookie本來就帶著，這個(gè)功能還是必須要用，但是作為cookie執(zhí)行存儲(chǔ)過程，單拎出來，然后用localStorage和sessionStorage來代替，這個(gè)時(shí)候可以做到很大，5M前端的量暫存來說，基本夠了）

2.API簡(jiǎn)單易用：(不用自己定義、封裝)

localStorage.setIntem(key,value);localStorage.getItem(key);

　　

3.區(qū)別：

1.都是可以在瀏覽器中存儲(chǔ)到本地的，sessionStorage 如果瀏覽器關(guān)了，會(huì)話結(jié)束，它就會(huì)清理；用這個(gè)的場(chǎng)景少;2.localStorage 只要存上了，不手動(dòng)清，就會(huì)一直在，不用清；用這個(gè)的場(chǎng)景多一些;--要存儲(chǔ)到本地，記錄下來，要緩存一些東西，下次在用的時(shí)候，直接拿就可以了，不用重新獲取一遍。

在iOS safari隱藏模式下:

localStorage.getItem 會(huì)報(bào)錯(cuò)，建議統(tǒng)一使用try-catch封裝起來

?

轉(zhuǎn)載于:https://www.cnblogs.com/licong654c/p/7544254.html

總結(jié)

以上是生活随笔為你收集整理的JS-WEB-API（存储）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。