細(xì)數(shù)localStorage的用法及使用注意事項(xiàng)

第細(xì)數(shù)localStorage的用法及使用注意事項(xiàng)目錄localStorage介紹localStorage使用localStorage的瀏覽器支持情況localStorage代碼中的使用localStorage注意事項(xiàng)

localStorage介紹

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

localStorage中一般瀏覽器支持的容量大小是5M，針對(duì)不同的瀏覽器，localStorage容量大小會(huì)有所不同。

localStorage使用

localStorage的瀏覽器支持情況

localStorage代碼中的使用

在項(xiàng)目中，使用localStorage首先需要做的先判斷瀏覽器是否支持;

if(!window.localStorage){

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

}else{

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

console.log('Helloworld!');

localStorage設(shè)置語(yǔ)法

if(!window.localStorage){

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

}else{

varstorage=window.localStorage;

//第一種設(shè)置方式：

storage["a"]=1;

//第二種設(shè)置方式：

storage.b=1;

//第三種設(shè)置方式：

storage.setItem("c",3);

console.log(typeofstorage["a"]);//打印出結(jié)果：String

console.log(typeofstorage["b"]);//打印出結(jié)果：String

console.log(typeofstorage["c"]);//打印出結(jié)果：String

在瀏覽器中查看結(jié)果：

localStorage獲取

//第一種方法讀取

vara=storage.a;

console.log(a);

//第二種方法讀取

varb=storage["b"];

console.log(b);

//第三種方法讀取

varc=storage.getItem("c");

console.log(c);

注意：localStorage的設(shè)置和讀取方式，官方推薦使用setItem/getItem；

localStorage修改

vargetVal=localStorage.getItem('myStorage');

if(getVal!=null){

localStorage.setItem('myStorage','setOk');

console.log('修改成功');

}else{

console.log('未找到myStorage,getVal返回值為null');

localStorage刪除

vargetVal=localStorage.getItem('myStorage');

if(getVal!=null){

localStorage.removeItem('myStorage');

console.log('刪除成功');

}else{

console.log('未找到myStorage，getVal返回值為null');

localStorage清除當(dāng)前域名下所有內(nèi)容

localStorage.clear();

localStorage中存入JSON對(duì)象，需先轉(zhuǎn)換成JSON字符串，再寫(xiě)入，在讀取時(shí)再轉(zhuǎn)換成JSON對(duì)象：（否則會(huì)報(bào)錯(cuò)）

varstorage=window.localStorage;

vardata={

name:'zhangSan',

sex:'1'

//將對(duì)象轉(zhuǎn)換為String,如果不轉(zhuǎn)，在存入localStorage后，讀取出來(lái)轉(zhuǎn)換json對(duì)象會(huì)報(bào)錯(cuò)

varsetData=JSON.stringify(data);

storage.setItem("data",setData);

//將JSON字符串轉(zhuǎn)換成為JSON對(duì)象輸出

varjsonString=storage.getItem("data");

console.log(typeofjsonString);//打印出String;

varjsonObj=JSON.parse(jsonString);

console.log(typeofjsonObj);//打印出Object;

localStorage注意事項(xiàng)

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

目前所有的瀏覽器中都會(huì)把localStorage的值類(lèi)型限定為string類(lèi)型，這個(gè)在對(duì)我們?nèi)粘１容^常見(jiàn)的JSON對(duì)象類(lèi)型需要一些轉(zhuǎn)換

localStorage在瀏覽器的隱私模式