javascript中localStorage本地存儲怎么使用

這篇文章主要介紹“javascript中localStorage本地存儲怎么使用”，在日常操作中，相信很多人在javascript中localStorage本地存儲怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript中localStorage本地存儲怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

介紹

現在前端做數據存儲，跨頁面傳值，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 循環獲取
for(var key in localStorage){
	console.log(key);
}

獲取所有的值

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

清除所有的值

localStorage.clear()

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

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

使用技巧

• localStorage特定于頁面的協議，不是同一域名，不能訪問。

• 有長度限制，5M左右，不同瀏覽器大小會有不同。

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

• 瀏覽器可以設置是否可以訪問數據，如果設置不允許會訪問失敗。

• 兼容IE8以上瀏覽器

• 只能存儲字符串類型，需要轉成字符串存儲。

需要注意的是：

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

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

例如：

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

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

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

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

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

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

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

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

到此，關于“javascript中localStorage本地存儲怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！