1. 程式人生 > 實用技巧 >localstorage - HTML 5 Web 本地儲存總結

localstorage - HTML 5 Web 本地儲存總結

001、localStorage概念

在html5中,新加入了一個localStorage特性,這個特性主要是用來作為本地儲存,解決了cookie儲存空間不足的問題(cookie中每條cookie儲存空間為4K),localStorage支援5M大小。

002、localStorage的侷限


1、瀏覽器的大小不統一,並且IE8以上版本才支援localStorage這個屬性


2、localStorgae的值型別限定為String型別,我們需要JSON.parse() JSON.Stringify()進行轉換


3、localStorage在瀏覽器的隱私模式下是不可讀取的


4、localStorage本質上是對字串的讀取,如果儲存內容多的話會消耗記憶體空間,會導致頁面變卡

5、localStorage不能被爬蟲抓取到


003、localStorage的設定

localStorage.name = "凡塵";

localStorage["name"] = "凡塵";

localStorage.setItem("name","凡塵")

004、localStorage的讀取

var nameval = localStorage.name;
console.log(nameval);

var nameval = localStorage["name"];
console.log(nameval);

var nameval = localStorage.getItem("name")

005、localStorage的獲取

使用key()方法,向其中輸入索引即可獲取對應的鍵值

localStorage.a = "1";

localStorage["b"] = "2";

localStorage.setItem("c","3");

for(var i=0;i<localStorage.length;i++){
  var key = localStorage.key(i);
  console.log(key)
}

006、localStorage的刪除

刪除所有:
  localStorage.clear();

刪除某一個值
  localStorage.removeItem(key)