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不會被爬蟲抓取。