首先使用localStorage的時候,咱們須要判斷瀏覽器是否支持localStorage這個屬性。json
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的網站
最後在控制檯上面打印出來的結果是:3d
不知道各位讀者有沒有注意到,剛剛存儲進去的是int類型,可是打印出來倒是string類型,這個與localStorage自己的特色有關,localStorage只支持string類型的存儲。localstorage
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的刪、改這兩個步驟blog
改的方法其實很簡單,至關於直接賦值索引
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 }
刪除的方法有兩種狀況,rem
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); }
4、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); }