javascript中l(wèi)ocalStorage本地存儲(chǔ)怎么使用

這篇文章主要介紹“javascript中l(wèi)ocalStorage本地存儲(chǔ)怎么使用”，在日常操作中，相信很多人在javascript中l(wèi)ocalStorage本地存儲(chǔ)怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript中l(wèi)ocalStorage本地存儲(chǔ)怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

介紹

現(xiàn)在前端做數(shù)據(jù)存儲(chǔ)，跨頁(yè)面?zhèn)髦?，localStorage是一個(gè)很好的方式，以鍵值對(duì)的方式存儲(chǔ)，也方便取值賦值，下面說(shuō)一說(shuō)使用方法和一些常見(jiàn)的使用技巧。

存值共有3種方式，localStorage相當(dāng)于window對(duì)象下面的一個(gè)屬性，所以有[]和.調(diào)用，但也具有自身的setItem方法

// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

取值也是如此，自身的方法是getItem

// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

改變的方式，就是相當(dāng)于給對(duì)應(yīng)的key重新賦值，就會(huì)把原來(lái)的值覆蓋掉

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

移除某一個(gè)值，可以通過(guò)對(duì)象刪除屬性的關(guān)鍵字delete也可以用自身的方法removeItem

// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

獲取所有的key

// 通過(guò)自身的key
for (var i=0;i<localStorage.length;i++) {
	console.log(localStorage.key(i));
}
// 通過(guò)for in 循環(huán)獲取
for(var key in localStorage){
	console.log(key);
}

獲取所有的值

localStorage.valueOf();//取出所有的值

清除所有的值

localStorage.clear()

判斷是否具有某個(gè)key，hasOwnProperty方法

localStorage.hasOwnProperty("name")
// 如果存在的話返回true，不存在返回false

使用技巧

• localStorage特定于頁(yè)面的協(xié)議，不是同一域名，不能訪問(wèn)。

• 有長(zhǎng)度限制，5M左右，不同瀏覽器大小會(huì)有不同。

• 生命周期是永久的，但是數(shù)據(jù)實(shí)際是存在瀏覽器的文件夾下，可能卸載瀏覽器就會(huì)刪除。

• 瀏覽器可以設(shè)置是否可以訪問(wèn)數(shù)據(jù)，如果設(shè)置不允許會(huì)訪問(wèn)失敗。

• 兼容IE8以上瀏覽器

• 只能存儲(chǔ)字符串類型，需要轉(zhuǎn)成字符串存儲(chǔ)。

需要注意的是：

1、瀏覽器限制localStorage的值類型為string類型，如果存儲(chǔ)的數(shù)據(jù)不是string類型，localStorage會(huì)自動(dòng)對(duì)數(shù)據(jù)進(jìn)行類型轉(zhuǎn)換；

2、存儲(chǔ)的Json對(duì)象數(shù)據(jù)時(shí)，需要使用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換成Json字符串，讀取時(shí)，使用JSON.parse()將Json字符串還原回去；

例如：

需要往localStorage中存儲(chǔ)一個(gè)對(duì)象person：

let person = {
    name: 'Ryan Xu',
    age: 18;
}

如果不使用JSON.stringify()處理：

window.localStorage.setItem('person1', person);
console.log(window.localStorage);

對(duì)于對(duì)象類型數(shù)據(jù)，如果不進(jìn)行處理直接存入localStorage中時(shí)，localStorage會(huì)自動(dòng)進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換，對(duì)象就會(huì)被轉(zhuǎn)換成[object Object]，不是我們想要的結(jié)果；

如果使用JSON.stringify()處理：

window.localStorage.setItem('person1', JSON.stringify(person));
console.log(window.localStorage);

從上面可以發(fā)現(xiàn)，對(duì)于對(duì)象類型數(shù)據(jù)，儲(chǔ)存到localStorage中時(shí)應(yīng)使用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換成Json字符串再儲(chǔ)存，同樣的，讀取時(shí)應(yīng)將讀取結(jié)果使用JSON.parse()還原回去。

到此，關(guān)于“javascript中l(wèi)ocalStorage本地存儲(chǔ)怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！