localStorage的使用

localStorage[本地存儲大約 5M] 使用

注意：使用 localstorage.setItem(name,value)存儲 JSON 對象時會發現瀏覽器存儲的內容爲[object,object]，這是由於在存儲的時候沒有進行類型轉換，所以在使用 localstorage.setItem()進行對象存儲以前須要使用 JSON.stringify(object)進行類型轉換，轉換成 JSON 字符串後進行存儲就會是咱們想要的樣子了{"usename":"zs"}
localStorage 會能夠將第一次請求的數據直接存儲到本地，這個至關於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

localStorage 的侷限

一、瀏覽器的大小不統一，而且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性
二、目前全部的瀏覽器中都會把 localStorage 的值類型限定爲 string 類型，這個在對咱們平常比較常見的 JSON 對象類型須要一些轉換
三、localStorage 在瀏覽器的隱私模式下面是不可讀取的
四、localStorage 本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、localStorage 不能被爬蟲抓取到
localStorage 與 sessionStorage 的惟一一點區別就是 localStorage 屬於永久性存儲，而 sessionStorage 屬於當會話結束的時候，sessionStorage 中的鍵值對會被清空

localStorage 的使用

localStorage 使用遵循同源策略,不一樣網站不能使用相同 localStorage

localStorage 只支持 string 類型的存儲。

• 1 將數據保存到 localStorage 中
  經常使用：localStorage.setItem(name,value)此處使用JSON.stringify(value)將 json 格式的 value 值轉爲 json 字符串使用。由於localStorage 只支持 string 類型的存儲。

// localStorage的寫入，localStorage的寫入有三種方法
if(！window.localStorage){
    alert("瀏覽器支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //寫入a字段
    storage["a"]=1;
    //寫入b字段
    storage.a=1;
    //寫入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
}

• 2 將 localStorage 中數據拿出來
  經常使用：localStorage.getItem(name)使用JSON.parse()將 json 字符串轉換爲 JSON 對象數據

// 讀取localStorage數據
if (!window.localStorage) {
  alert("瀏覽器支持localstorage");
} else {
  var storage = window.localStorage;
  //寫入a字段
  storage["a"] = 1;
  //寫入b字段
  storage.a = 1;
  //寫入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);
}

• 3 刪除 localStorage 中數據

  • 1 清除 localStorage 全部內容

  var storage = window.localStorage;
  storage.a = 1;
  storage.setItem("c", 3);
  console.log(storage);
  storage.clear();
  console.log(storage);

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

  var storage = window.localStorage;
  storage.a = 1;
  storage.setItem("c", 3);
  console.log(storage);
  storage.removeItem("a");
  console.log(storage.a);