如何使用localStorage?

首先使用localStorage的時候，我們需要判斷瀏覽器是否支持localStorage這個屬性。

if(！window.localStorage){
            alert("瀏覽器支持localstorage");
            return false;
        }else{
            //主邏輯業務 
}

　　localStorage的寫法有三種方法，分別是：

if(!window.localStorage) {
    alert("瀏覽器不支持localStorage");
}else{
  var storage = window.localStorage;

//寫入a字段    方法一的寫法
  storage["a"] = 1


// 寫入b字段   方法二的寫法    

storage.b = 2;

//寫入c字段   這個方法是官方推薦使用的 

storage.setItem("c",3) ;

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

}

 

　　

注意：

localStorage的使用也是遵循同源策略，不同的網站是不能直接共用相同的localStorage的

 最后在控制台上面打印出來的結果是:

 

不知道各位讀者有沒有注意到，剛剛存儲進去的是int類型，但是打印出來卻是string類型，這個與localStorage本身的特點有關，localStorage只支持string類型的存儲。

 

 locaStorage的讀取

 

if(!window.localStorage){
        alert("瀏覽器不支持localStorage");
    }else{
        var storage = window.localStorage;
        // 寫入a字段
        storage["a"] = 1;
        // 寫入b字段
        storage.b = 2;
        // 寫入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
        // 第一種讀取方法
        var a = storage.a;
        console.log(a);
        // 第二種讀取方法
        var b = storage["b"];
        console.log(b);
        // 第三種讀取方法
        var c = storage.getItem("c");//官方推薦使用
        console.log(c);
    }

　　

localStorage的刪、改這兩個步驟

改的方法其實很簡單，相當於直接賦值

if(!window.localStorage){
    alert("瀏覽器不支持localStorage");
}else{
    var storage = window.localStorage;
    // 寫入a字段
    storage["a"] = 1;
    // 寫入b字段
    storage.b = 2;
    // 寫入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    /*console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);*/
    // 相當於直接賦值
    storage.a = 4;
    console.log(storage.a);   // 4
}

　　刪除的方法有兩種情況，

1.將localStorage的所有內容清楚

var storage = window.localStorage;
    storage.a = 1;
    storage.setItem("c",3);
    console.log(storage);//Storage {a: "1", c: "3", length: 2}
    storage.clear();//刪除方法
    console.log(storage);//Storage {length: 0}

　　

2.將localStorage中的某個鍵值對刪除

 

var storage = window.localStorage;
    storage.a = 1;
    storage.setItem("c",3);
    console.log(storage);//Storage {a: "1", c: "3", length: 2}
    storage.removeItem("a");//刪除方法
    console.log(storage);//Storage {c: "3", length: 1}

　　

loaclStorage的鍵獲取

使用key()方法，向storage的數組中通過索引獲取鍵值對的值

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key = storage.key(i);
    console.log(key);
}

　　

四、loaclStorage的類型轉化事項

一般我們會將JSON存入localStorage中，但是在localStorage會自動將其轉換成string類型

使用JSON.stringify()方法將JSON轉換為JSON字符串

 

if(!window.localStorage){
    alert("瀏覽器不支持localStorage");
}else{
    var storage = window.localStorage;
    var data = {
        username:"lisi",
        password:"123456"
    };
    // JSON轉化為字符串
    var b = JSON.stringify(data);
    // 寫入到localStorage中
    storage.setItem("data",b);
    console.log(storage.data);
}

　　

使用JSON.parseIn()方法，將讀取之后的JSON字符串轉化成JSON對象的形式

if(!window.localStorage){
    alert("瀏覽器不支持localStorage");
}else{
    var storage = window.localStorage;
    var data = {
        username:"lisi",
        password:"123456"
    };
    // JSON轉化為字符串
    var b = JSON.stringify(data);
    // 寫入到localStorage中
    storage.setItem("data",b);
    console.log(storage.data);
    // 將JSON字符串轉化成JSON對象
    var json = storage.getItem("data");
    var jsonObj = JSON.parse(json);
    console.log(typeof jsonObj);
}