[點(diǎn)晴永久免費(fèi)OA]瀏覽器localStorage使用方法
現(xiàn)在前端做數(shù)據(jù)存儲(chǔ)，跨頁(yè)面?zhèn)髦担琹ocalStorage是一個(gè)很好的方式，以鍵值對(duì)的方式存儲(chǔ)，也方便取值賦值，下面說一說使用方法和一些常見的使用技巧。 1、存值共有3種方式，localStorage相當(dāng)于window對(duì)象下面的一個(gè)屬性，所以有[]和.調(diào)用，但也具有自身的setItem方法 // 自身方法 localStorage.setItem("name","bonly"); // []方法 localStorage["name"]="bonly"; // .方法 localStorage.name="bonly"; 2、取值也是如此，自身的方法是getItem // 自身方法 localStorage.getItem("name"); // []方法 localStorage["name"]; // .方法 localStorage.name; 3、改變的方式，就是相當(dāng)于給對(duì)應(yīng)的key重新賦值，就會(huì)把原來的值覆蓋掉 // 自身方法 localStorage.setItem("name","TOM"); // []方法 localStorage["name"]="TOM"; // .方法 localStorage.name="TOM"; 4、移除某一個(gè)值，可以通過對(duì)象刪除屬性的關(guān)鍵字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 循環(huán)獲取 for(var key in localStorage) { console.log(key); } 6、獲取所有的值 localStorage.valueOf(); //取出所有的值 7、清除所有的值 localStorage.clear(); 8、判斷是否具有某個(gè)key，hasOwnProperty方法 localStorage.hasOwnProperty("name") // 如果存在的話返回true，不存在返回false 9、注意事項(xiàng) 1.localStorage特定于頁(yè)面的協(xié)議，不是同一域名，不能訪問。 2.有長(zhǎng)度限制，5M左右，不同瀏覽器大小會(huì)有不同。 3.生命周期是永久的，但是數(shù)據(jù)實(shí)際是存在瀏覽器的文件夾下，可能卸載瀏覽器就會(huì)刪除。 4.瀏覽器可以設(shè)置是否可以訪問數(shù)據(jù)，如果設(shè)置不允許會(huì)訪問失敗。 5.兼容IE8以上瀏覽器。 6.只能存儲(chǔ)字符串類型，需要轉(zhuǎn)成字符串存儲(chǔ)。 10、使用技巧 1.先判斷瀏覽器是否支持localStorage，通過if(!window.localStorage) return; 2.單詞太長(zhǎng)，不方便書寫，可以利用 var storage=window.localStorage; 3.字符串和原始類型需要通過JSON.stringfy轉(zhuǎn)字符串，通過JSON.parse轉(zhuǎn)成對(duì)象。 4.通過封裝方法實(shí)現(xiàn)來回轉(zhuǎn)化。 該文章在 2023/8/4 22:17:40 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
