介紹

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

存值共有3種方式，localStorage相當于window對象下面的一個屬性，所以有[]和.調用，但也具有自身的setItem方法

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

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

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

改變的方式，就是相當于給對應的key重新賦值，就會把原來的值覆蓋掉

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

移除某一個值，可以通過對象刪除屬性的關鍵字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()

判斷是否具有某個key，hasOwnProperty方法

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

使用技巧

• localStorage特定于頁面的協(xié)議，不是同一域名，不能訪問。
• 有長度限制，5M左右，不同瀏覽器大小會有不同。
• 生命周期是永久的，但是數(shù)據(jù)實際是存在瀏覽器的文件夾下，可能卸載瀏覽器就會刪除。
• 瀏覽器可以設置是否可以訪問數(shù)據(jù)，如果設置不允許會訪問失敗。
• 兼容IE8以上瀏覽器
• 只能存儲字符串類型，需要轉成字符串存儲。

需要注意的是：

1、瀏覽器限制localStorage的值類型為string類型，如果存儲的數(shù)據(jù)不是string類型，localStorage會自動對數(shù)據(jù)進行類型轉換；

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

例如：

需要往localStorage中存儲一個對象person：

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

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

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

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

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

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

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

總結

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

最新評論