前端學習歷程--localstroge
阿新 • • 發佈:2017-05-23
限定 輸出 storage alt json 是否 特性 讀取 set
一、 localstorage的特性
1、需要ie8+
2、瀏覽器中都會把localStorage的值類型限定為string類型,這個在對我們日常比較常見的JSON對象類型需要一些轉換
3、localStorage本質上是對字符串的讀取,如果存儲內容多的話會消耗內存空間,會導致頁面變卡
4、localStorage不能被爬蟲抓取到
二、localstorage使用規則
1、判斷是否支持localStorage
2、localStorage的三種寫入方法
在控制臺中:
因為localStorage只支持string類型的存儲
3、localStorage的使用也是遵循同源策略的,所以不同的網站直接是不能共用相同的localStorage
4、localStorage的讀取方法
5、localStorage的修改方法
if(!window.localStorage){ alert("瀏覽器支持localstorage"); }else{ var storage=window.localStorage; //寫入a字段 storage["a"]=1; //寫入b字段 storage.b=1; //寫入c字段 storage.setItem("c",3); console.log(storage.a); // console.log(typeof storage["a"]); // console.log(typeof storage["b"]); // console.log(typeof storage["c"]); /*分割線*/ storage.a=4; console.log(storage.a); }
6、localStorage的刪除方法
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.clear();//清除所有 console.log(storage);
var storage=window.localStorage;
storage.a=1; storage.setItem("c",3); console.log(storage); storage.removeItem("a");//清除某個鍵值對 console.log(storage.a);
7、localStorage的鍵獲取
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0;i<storage.length;i++){ var key=storage.key(i);//使用key()方法遍歷索引 console.log(key); }
8、將JSON轉換成為JSON字符串
if(!window.localStorage){ alert("瀏覽器支持localstorage"); }else{ var storage=window.localStorage; var data={ name:‘xiecanyong‘, sex:‘man‘, hobby:‘program‘ }; var d=JSON.stringify(data); storage.setItem("data",d); console.log(storage.data); }
讀取之後要將JSON字符串轉換成為JSON對象,使用JSON.parse()方法
var storage=window.localStorage; var data={ name:‘xiecanyong‘, sex:‘man‘, hobby:‘program‘ }; var d=JSON.stringify(data); storage.setItem("data",d); //將JSON字符串轉換成為JSON對象輸出 var json=storage.getItem("data"); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);
9、判斷localStorage是否已滿
一般為5m,可檢測當前已使用大小
而1m=1048576b
前端學習歷程--localstroge