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

localStorage介紹

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

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

localStorage使用

localStorage的瀏覽器支持情況

localStorage代碼中的使用

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

if(!window.localStorage){

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

}else{

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

console.log('Helloworld!');

localStorage設(shè)置語法

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對象，需先轉(zhuǎn)換成JSON字符串，再寫入，在讀取時再轉(zhuǎn)換成JSON對象：（否則會報錯）

varstorage=window.localStorage;

vardata={

name:'zhangSan',

sex:'1'

//將對象轉(zhuǎn)換為String,如果不轉(zhuǎn)，在存入localStorage后，讀取出來轉(zhuǎn)換json對象會報錯

varsetData=JSON.stringify(data);

storage.setItem("data",setData);

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

varjsonString=storage.getItem("data");

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

varjsonObj=JSON.parse(jsonString);

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

localStorage注意事項

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

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

localStorage在瀏覽器的隱私模式