頁面傳值不交互:JS存儲數據之LocalStorage用法

本人的需求是一個頁面傳值給另外一個頁面，但是不需要交互：

A頁面設置LocalStorage：
    if(!window.localStorage){
            alert("瀏覽器不支持localstorage");
     }else{
            var storage=window.localStorage;
            localStorage.setItem("name",APP_USERNAME) ;

//存儲名字爲name值爲APP_USERNAME的變量

    localStorage.name = APP_USERNAME; // 等價於上面的命令

        }
B頁面獲取name值：
    var storage=window.localStorage;
     //第一種方法讀取
     var name=localStorage.getItem("name");讀取保存在localStorage對象里名爲name的變量的值。

一些常用的API如下表所示：

名稱	作用
clear	清空localStorage上存儲的數據
getItem	讀取數據
hasOwnProperty	檢查localStorage上是否保存了變量x，需要傳入x
key	讀取第i個數據的名字或稱爲鍵值(從0開始計數)
length	localStorage存儲變量的個數
propertyIsEnumerable	用來檢測屬性是否屬於某個對象的
removeItem	刪除某個具體變量
setItem	存儲數據
toLocaleString	將（數組）轉爲本地字符串
valueOf	獲取所有存儲的數據

其他操作：

清空localStorage

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

存儲數據

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

讀取數據

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)));
}

刪除某個變量

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

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

// 這些數據都是測試的，是在我當下環境裏的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

將數組轉爲本地字符串

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轉爲字符串存到變量裏
console.log(students);
localStorage.setItem("students",students);//將變量存到localStorage裏

var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //轉爲JSON
console.log(newStudents); // 打印出原先對象