現在前端做數據存儲,跨頁面傳值,localStorage是一個很好的方式,以鍵值對的方式存儲,也方便取值賦值,下面說一說使用方法和一些常見的使用技巧。
1.存值共有3種方式,localStorage相當於window對象下面的一個屬性,所以有[]和.調用,但也具有自身的setItem方法
// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";
2.取值也是如此,自身的方法是getItem
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;
3.改變的方式,就是相當於給對應的key重新賦值,就會把原來的值覆蓋掉
// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";
4.移除某一個值,可以通過對象刪除屬性的關鍵字delete也可以用自身的方法removeItem
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name
5.獲取所有的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);
}
6.獲取所有的值
localStorage.valueOf();取出所有的值
7.清除所有的值
localStorage.clear()
8.判斷是否具有某個key,hasOwnProperty方法
localStorage.hasOwnProperty("name")
// 如果存在的話返回true,不存在返回false
9.注意事項
1.localStorage特定於頁面的協議,不是同一域名,不能訪問。
2.有長度限制,5M左右,不同瀏覽器大小會有不同。
3.生命周期是永久的,但是數據實際是存在瀏覽器的文件夾下,可能卸載瀏覽器就會刪除。
4.瀏覽器可以設置是否可以訪問數據,如果設置不允許會訪問失敗。
5.兼容IE8以上瀏覽器
6.只能存儲字符串類型,需要轉成字符串存儲。
10.使用技巧
1.先判斷瀏覽器是否支持localStorage,通過if(!window.localStorage) return;
2.單詞太長,不方便書寫,可以利用 var storage=window.localStorage;
3.字符串和原始類型需要通過JSON.stringfy轉字符串,通過JSON.parse轉成對象
4.通過封裝方法實現來回轉化