本地存儲localStorage的用法總結

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。

localStorage的優勢與局限

localStorage的優勢

1、localStorage拓展了cookie的4K限制

2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的

localStorage的局限

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

2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換

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

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

5、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空。

localStorage的使用

在項目中，使用localStorage首先需要做的先判斷瀏覽器是否支持;

if(!window.localStorage){
     alert("瀏覽器不支持localstorage");
}else{
    //主邏輯業務
    console.log('Hello world!');
}

存儲數據

if(!window.localStorage){
    alert("瀏覽器支持localstorage");
}else{
    var storage=window.localStorage;
    //第一種設置方式：
    storage["a"]=1;
    //第二種設置方式：
    storage.b=1;
    //第三種設置方式：
    storage.setItem("c",3);
    
    console.log(typeof storage["a"]);  //打印出結果：String
    console.log(typeof storage["b"]);  //打印出結果：String
    console.log(typeof storage["c"]);  //打印出結果：String
}

讀取數據

//第一種方法讀取
var a=storage.a;
console.log(a);

//第二種方法讀取
var b=storage["b"];
console.log(b);

//第三種方法讀取
var c=storage.getItem("c");
console.log(c);

注意：localStorage的設置和讀取方式，官方推薦使用 setItem / getItem；

修改數據

改變的方式，就是相當於給對應的key重新賦值，就會把原來的值覆蓋掉

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){
    localStorage.setItem('myStorage','setOk');
    console.log('修改成功');
}else{
    console.log('未找到myStorage, getVal返回值為 null');
}

刪除數據

var getVal = localStorage.getItem('myStorage');
if( getVal  != null ){
    localStorage.removeItem('myStorage');
    console.log('刪除成功');
}else{
    console.log('未找到myStorage，getVal返回值為 null');
}

清除當前域名下所有內容

localStorage.clear();

---

將JSON存儲到localStorage里

localStorage中存入 JSON 對象，需先轉換成 JSON 字符串，再寫入，在讀取時再轉換成 JSON 對象：（否則會報錯）

var storage=window.localStorage;
var data={
     name:'zhangSan',
     sex:'1'
 };
 //將對象轉換為 String ,如果不轉，在存入localStorage后，讀取出來轉換 json對象會報錯
 var setData=JSON.stringify(data); 
 storage.setItem("data",setData);
 
 //將JSON字符串轉換成為JSON對象輸出
 var jsonString=storage.getItem("data");
 console.log(typeof jsonString); //打印出 String;
 var jsonObj=JSON.parse(jsonString);
 console.log(typeof jsonObj); //打印出 Object;