localStorage/sessionStorage

html5提供了兩種在客戶端存儲數據的新方法

    localStorage: 無時間限制的數據存儲

    sessionStorage:針對一個session的數據存儲

    localStorage/sessionStorage用來替代cookie。因爲cookie不能存儲大量的數據,二期每個服務器請求都會傳遞,效率較低速度也慢。

    cookie上限爲4k,localStorage一般瀏覽器支持的是5M大小,這個在不同的瀏覽器中localStorage會有所不同。

    localStorage支持增刪改查。

    localStorage使用:        //sessionStorage使用方式相同

//推薦使用getUtem/setItem,也可以用json方式訪問
var storage = window.localStorage;
storage.setItem('name','張三');   //storage.name = '張三'
storage.setItem('code','00001');
console.log(storage.getItem('name'));  //張三
storage.setItem('data',JSON.stringify({phone:'13000000000',car:'紅旗'}))

var data = JSON.parse(storage.getItem('data'));
console.log(data.phone+'|'+data.car);//13000000000|紅旗
//遍歷
console.log(storage.length); //3
for(let i=0;i<storage.length;i++){
    console.log(storage.key(i));    //code data name
}
//刪除 
storage.removeItem('code');
for(let i=0;i<storage.length;i++){
    console.log(storage.key(i));    //data name
}

localStorage只存儲字符串,如果存儲對象,需要用JSON.stringify()將對象反序列化爲字符串,同理,獲取對象字符串後,序列化爲對象。

另外需要注意:

    IE8以上才支持localStorage。

    localStorage在隱私模式下不可讀取。

    localStorage不會被爬蟲抓取。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章