當(dāng)前位置:
首頁 >
JS-WEB-API(存储)
發(fā)布時(shí)間:2025/3/20
32
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS-WEB-API(存储)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.請描述一下cookie,sessionStorage 和 localStorage 的區(qū)別
| cookie | 4k | 是 | 需要自己封裝,麻煩 |
| sessionStorage | 5M | 否(只作為存儲來用) | getItem setItem |
| localStorage | 5M | 否(只作為存儲來用) | getItem setItem |
1.html5出來之前到html5一個(gè)標(biāo)準(zhǔn)的過渡,html5沒出來之前cookie是最為本地存儲的一個(gè)方法; 2.html5出來之后有sessionStorage 和localStorage這兩個(gè)api可以作為本地存儲。 3.ie低版本的淘汰,多少年還沒有淘汰干凈,cookie本地存儲的功能還會一直存在,只不過比例越來越小了;sessonStorage 和localStorage本地存儲的功能慢慢應(yīng)用到各個(gè)新的地方,慢慢的把cookie取代。 (cookie不是sessionStorage和localStorage被取代就沒了,本身還有另外的功能)
Cookie
1.本身用于客戶端和服務(wù)器端通信
2.但是它有本地存儲的功能,于是就被“借用”**
--html5出來之后雖然有sessionStorage和localStorage這種新的api,但是cookie本身的功能是不會變的,cookie一直會有,一直會作為客戶端和服務(wù)器端通信的一種方式。它有本地存儲的能力,但是有沒有其 他方式能做的多,只好被借用。3.使用document.cookie = ...獲取和修改即可**
--用的時(shí)候比較麻煩,因?yàn)閏ookie就是一個(gè)字符串,在本地存儲的時(shí)候,你得是key-value對象的形式存儲,不能光存一個(gè)信息。所有的服務(wù)器端的請求(發(fā)ajax,請求一個(gè)頁面,一個(gè)js、css文件、一個(gè)圖片),都會把cookie帶進(jìn)去,所有它是一個(gè)客戶端和服務(wù)器端通信的一個(gè)工具,一個(gè)協(xié)議,一個(gè)條款,但是它又有本地存儲的能力。*cookie用于存儲的缺點(diǎn):(可設(shè)置失效時(shí)間,默認(rèn)是關(guān)閉瀏覽器后失效)
1.存儲量太小,只有4KB;
(因?yàn)樗獢y帶到請求中去和服務(wù)器端通信,每次請求3-5M,不說慢,如果手機(jī)用流量很快就沒了)2.所有http請求都帶著,會影響獲取資源的效率;
(如果太多每次請求都帶著,會效率很低)3.API簡單,需要封裝才能用 document.cookie =...;
(作為存儲來說,不可能只存一個(gè)東西,如果用戶名存什么,密碼存什么(密碼加密)),如果本地存儲當(dāng)中的應(yīng)用,比如存?zhèn)€城市名,性別是什么,姓名是什么這些,你要存好多好多的數(shù)據(jù),怎么通過一個(gè)字符串解決呢,需要拆解封裝的,所以cookie用起來特別麻煩)localStorage 和 sessionStorage:
1.html5專門為存儲而設(shè)計(jì),最大容量5M
不用在請求中帶著,請求中該帶不會帶多,cookie本來就帶著,這個(gè)功能還是必須要用,但是作為cookie執(zhí)行存儲過程,單拎出來,然后用localStorage和sessionStorage來代替,這個(gè)時(shí)候可以做到很大,5M前端的量暫存來說,基本夠了)2.API簡單易用:(不用自己定義、封裝)
localStorage.setIntem(key,value);localStorage.getItem(key);
3.區(qū)別:
1.都是可以在瀏覽器中存儲到本地的,sessionStorage 如果瀏覽器關(guān)了,會話結(jié)束,它就會清理;用這個(gè)的場景少;2.localStorage 只要存上了,不手動清,就會一直在,不用清;用這個(gè)的場景多一些;--要存儲到本地,記錄下來,要緩存一些東西,下次在用的時(shí)候,直接拿就可以了,不用重新獲取一遍。在iOS safari隱藏模式下:
localStorage.getItem 會報(bào)錯(cuò),建議統(tǒng)一使用try-catch封裝起來?
轉(zhuǎn)載于:https://www.cnblogs.com/licong654c/p/7544254.html
總結(jié)
以上是生活随笔為你收集整理的JS-WEB-API(存储)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 我们用4行代码节省了100万 记录与阿里
- 下一篇: JavaScript中this详解