概念

什么是localStorage

在HTML5中，新加入了一個(gè)localStorage特性，這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的，解決了cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k).

localStorage的優(yōu)勢(shì)

1、localStorage拓展了cookie的4K限制

2、localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)，相比于cookie可以節(jié)約帶寬，但是這個(gè)卻是只有在高版本的瀏覽器中才支持的

特點(diǎn)

1、瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性

2、 localStorage本質(zhì)上是對(duì)字符串的讀取，有json格式時(shí)需要JSON.stringify()轉(zhuǎn)化為字符串。

3、localStorage在瀏覽器的隱私模式下面是不可讀取的,localStorage不能被爬蟲抓取到.

代碼的實(shí)現(xiàn)

檢測(cè)瀏覽器是否支持

首先在使用localStorage的時(shí)候，我們需要判斷瀏覽器是否支持localStorage這個(gè)屬性

? ? if(!window.localStorage){

? ? ? ? ?? alert("瀏覽器支持localstorage");

? ? ?? }else{

? ? ? ? ?? //主邏輯業(yè)務(wù)

? ? ?? }

增刪改查

存儲(chǔ)數(shù)據(jù)

localStorage.setItem(key,value);

取數(shù)據(jù)

localStorage.getItem(key）;

刪除數(shù)據(jù)

localStorage.removeItem(key);

改數(shù)據(jù)

localStorage.setItem(key,value);