localStorage和sessionStorage

H5新特性之一:本地存儲lacalStorage

優勢:

　　1.解決了cookie本地存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k),localStorage通常瀏覽器支持的是5m,視瀏覽器而定

　　2. localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬

缺點:

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

　　2.全部的瀏覽器中都會把localStorage的值類型限定爲string類型，對JSON對象類型須要一些轉換

　　3.localStorage在瀏覽器的隱私模式下面是不可讀取的

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

　　5.localStorage不能被爬蟲抓取到

區別:localStorage屬於永久性存儲;sessionStorage當會話結束的時候，其中的鍵值對會被清空

用法:

　　1.清空:

localStorage.clear() // undefined 
localStorage //Storage {length: 0}

　　2.存儲:

localStorage.setItem("name","caibin") //存儲名字爲name值爲caibin的變量
localStorage.name = "caibin"; // 等價於上面的命令 
localStorage // Storage{name: "caibin", length: 1} 讀取數據

　　3.讀取:

localStorage.getItem("name") //caibin,讀取保存在localStorage對象里名爲name的變量的值
localStorage.name // "caibin"
localStorage.valueOf() //讀取存儲在localStorage上的全部數據
localStorage.key(0) // 讀取第一條數據的變量名(鍵值)
//遍歷並輸出localStorage裏存儲的名字和值
for(var i=0; i<localStorage.length;i++){
　　console.log('localStorage裏存儲的第'+i+'條數據的名字爲：'+localStorage.key(i)+',值爲：'+localStorage.getItem(localStorage.key(i)));
}

　　4.刪除某個變量:

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 以前保存的name變量從localStorage裏刪除了

　　5.檢查localStorage裏是否保存某個變量:

localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false

　　6.將數組轉爲本地字符串:

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"

　　7.將JSON存儲到localStorage裏:

var students = {
  xiaomin: {
    name: "xiaoming",
    grade: 1
  },
  teemo: {
    name: "teemo",
    grade: 3
  }
}
 
students = JSON.stringify(students); //將JSON轉爲字符串存到變量裏
console.log(students);
localStorage.setItem("students",students);//將變量存到localStorage裏
 
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉爲JSON
console.log(newStudents); // 打印出原先對象