介紹

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

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

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

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

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

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

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

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

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

獲取所有的key

// 通過自身的key
for (var i=0;i<localStorage.length;i++) {
	console.log(localStorage.key(i));
}
// 通過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特定于頁面的協(xié)議，不是同一域名，不能訪問。
• 有長度限制，5M左右，不同瀏覽器大小會(huì)有不同。
• 生命周期是永久的，但是數(shù)據(jù)實(shí)際是存在瀏覽器的文件夾下，可能卸載瀏覽器就會(huì)刪除。
• 瀏覽器可以設(shè)置是否可以訪問數(shù)據(jù)，如果設(shè)置不允許會(huì)訪問失敗。
• 兼容IE8以上瀏覽器
• 只能存儲(chǔ)字符串類型，需要轉(zhuǎn)成字符串存儲(chǔ)。

需要注意的是：

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

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

例如：

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

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

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

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

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

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

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

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

總結(jié)

到此這篇關(guān)于javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用的文章就介紹到這了,更多相關(guān)js localStorage本地存儲(chǔ)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論