記得前端大神winter說過：要建立起自己的知識體系混狠，第一步：尋找線索(找準(zhǔn)確岸霹、全面的)；第二步将饺，建立聯(lián)系贡避；第三步，是分類(用思維導(dǎo)圖)予弧，第四步贸桶，是追本溯源(找到最初的那個它～)
今天，懷著崇拜大神的心情桌肴，來學(xué)習(xí)下 localStorage的基本用法皇筛。用到的學(xué)習(xí)機是chrome瀏覽器，畢竟大廠權(quán)威性還是可以的坠七。
我首先在開發(fā)者工具的Console中水醋，輸入了
localStorage.
然后就彈出了一些列宿主（瀏覽器）提供的localStorage自帶的方法，摘錄了一些常用的API如下表所示：
| 名稱 | 作用 |
|---|---|
| clear | 清空localStorage上存儲的數(shù)據(jù) |
| getItem | 讀取數(shù)據(jù) |
| hasOwnProperty | 檢查localStorage上是否保存了變量x彪置，需要傳入x |
| key | 讀取第i個數(shù)據(jù)的名字或稱為鍵值(從0開始計數(shù)) |
| length | localStorage存儲變量的個數(shù) |
| propertyIsEnumerable | 用來檢測屬性是否屬于某個對象的 |
| removeItem | 刪除某個具體變量 |
| setItem | 存儲數(shù)據(jù) |
| toLocaleString | 將（數(shù)組）轉(zhuǎn)為本地字符串 |
| valueOf | 獲取所有存儲的數(shù)據(jù) |
清空localStorage
localStorage.clear() // undefined
localStorage // Storage {length: 0}
存儲數(shù)據(jù)
localStorage.setItem("name","caibin") //存儲名字為name值為caibin的變量
localStorage.name = "caibin"; // 等價于上面的命令
localStorage // Storage {name: "caibin", length: 1}
讀取數(shù)據(jù)
localStorage.getItem("name") //caibin,讀取保存在localStorage對象里名為name的變量的值
localStorage.name // "caibin"
localStorage.valueOf() //讀取存儲在localStorage上的所有數(shù)據(jù)
localStorage.key(0) // 讀取第一條數(shù)據(jù)的變量名(鍵值)
//遍歷并輸出localStorage里存儲的名字和值
for(var i=0; i<localStorage.length;i++){
console.log('localStorage里存儲的第'+i+'條數(shù)據(jù)的名字為：'+localStorage.key(i)+',值為：'+localStorage.getItem(localStorage.key(i)));
}
刪除某個變量
localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name變量已經(jīng)從localStorage里刪除了
檢查localStorage里是否保存某個變量
// 這些數(shù)據(jù)都是測試的拄踪，是在我當(dāng)下環(huán)境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex') // false
將數(shù)組轉(zhuǎn)為本地字符串
var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
將JSON存儲到localStorage里
var students = {
xiaomin: {
name: "xiaoming",
grade: 1
},
teemo: {
name: "teemo",
grade: 3
}
}
students = JSON.stringify(students); //將JSON轉(zhuǎn)為字符串存到變量里
console.log(students);
localStorage.setItem("students",students);//將變量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉(zhuǎn)為JSON
console.log(newStudents); // 打印出原先對象
說一下這個糾結(jié)的東西：簡單說是跨js傳遞json值拳魁，通過localStorage中轉(zhuǎn)惶桐，有種壓縮和解壓縮的味道在。其實應(yīng)該有個公共的變量.js放在最前面潘懊，會不會更好呢姚糊。我好像是在這樣一個場景下用到的：后臺傳遞json格式的經(jīng)緯度給前臺，前臺讓它在地圖上渲染出來授舟，而且是兩個不同的js文件傳遞救恨，然后就使用了這個方法。不過現(xiàn)在想想應(yīng)該有其它更好的解決方法吧释树。
