localStorage

localStoragelocalStorage能夠將第一次請求的數據直接存儲到本地,解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k),localStorage中通常瀏覽器支持的是5M大小(不一樣的瀏覽器有所不一樣)。json

localStorage的侷限瀏覽器

一、瀏覽器的大小不統一,而且在IE8以上的IE版本才支持localStorage這個屬性cookie

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型,這個在對咱們平常比較常見的JSON對象類型須要一些轉換session

三、localStorage在瀏覽器的隱私模式下面是不可讀取的localstorage

四、localStorage本質上是對字符串的讀取,若是存儲內容多的話會消耗內存空間,會致使頁面變卡code

五、localStorage不能被爬蟲抓取到對象

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲,而sessionStorage屬於當會話結束的時候,sessionStorage中的鍵值對會被清空生命週期

localStorage生命週期是永久
sessionStorage生命週期爲當前窗口或標籤頁,一旦窗口或標籤頁被永久關閉了,那麼全部經過sessionStorage存儲的數據也就被清空了
內存

//判斷瀏覽器是否支持
if(!window.localStorage){
    alert("瀏覽器不支持localstorage");
    return false;
}else{
    //主邏輯業務
    var storage=window.localStorage;
    //寫入a字段
    storage["a"]=1;
    //寫入b字段
    storage.b=2;
    //寫入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);//打印出來的都是string類型
}

官方推薦的是getItem\setItem這兩種方法對其進行存取rem

var storage=window.localStorage;
//增
storage["a"]=1;
storage.b=2;
storage.setItem("c",3);
//刪
storage.clear();//刪除全部內容
storage.removeItem("a");//刪除某個鍵值對
//改
storage.a=4;
//查
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

JSON存入localStorage中,可是在localStorage會自動將localStorage轉換成爲字符串形式,可使用JSON.stringify()這個方法,來將JSON轉換成爲JSON字符串

var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
//將JSON對象轉換成爲字符串
var d=JSON.stringify(data);
storage.setItem("data",d);
//將字符串轉換成爲JSON對象
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
相關文章
相關標籤/搜索