淺析localStorage本地存儲

1、什麼是localStorage、sessionStorage
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。

2、localStorage的優點與侷限
localStorage的優點
一、localStorage拓展了cookie的4K限制
二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的
localStorage的侷限
一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
三、localStorage在瀏覽器的隱私模式下面是不可讀取的
四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

3、localStorage的使用
localStorage的瀏覽器支持狀況：

這裏要特別聲明一下，若是是使用IE瀏覽器的話，那麼就要UserData來做爲存儲，這裏主要講解的是localStorage的內容，因此userData不作過多的解釋，並且以博主我的的見解，也是沒有必要去學習UserData的使用來的，由於目前的IE6/IE7屬於淘汰的位置上，並且在現在的不少頁面開發都會涉及到HTML5CSS3等新興的技術，因此在使用上面通常咱們不會去對其進行兼容
首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性

[JavaScript] 純文本查看 複製代碼
?
1
2
3
4
5
6
if(!window.localStorage){

console.log("瀏覽器支持localstorage");
        return false;
    }else{
        //主邏輯業務
    }

localStorage的寫入，localStorage的寫入有三種方法，這裏就一一介紹一下

[JavaScript] 純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
if(！window.localStorage){

console.log("瀏覽器支持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"]);
    }

運行後的結果以下：

這裏要特別說明一下localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage
最後在控制檯上面打印出來的結果是:

不知道各位有沒有注意到，剛剛存儲進去的是int類型，可是打印出來倒是string類型，這個與localStorage自己的特色有關，localStorage只支持string類型的存儲。
localStorage的讀取
[JavaScript] 純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if(!window.localStorage){

console.log("瀏覽器支持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);
    }

這裏面是三種對localStorage的讀取，其中官方推薦的是getItemsetItem這兩種方法對其進行存取，不要問我這個爲何，由於這個我也不知道
我以前說過localStorage就是至關於一個前端的數據庫的東西，數據庫主要是增刪查改這四個步驟，這裏的讀取和寫入就至關於增、查的這兩個步驟
下面咱們就來講一說localStorage的刪、改這兩個步驟
改這個步驟比較好理解，思路跟從新更改全局變量的值同樣，這裏咱們就以一個爲例來簡單的說明一下
[JavaScript] 純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
if(!window.localStorage){

console.log("瀏覽器支持localstorage");
    }else{
        var storage=window.localStorage;
        //寫入a字段
        storage["a"]=1;
        //寫入b字段
        storage.b=1;
        //寫入c字段
        storage.setItem("c",3);
        console.log(storage.a);
        // console.log(typeof storage["a"]);
        // console.log(typeof storage["b"]);
        // console.log(typeof storage["c"]);
        /*分割線*/
        storage.a=4;
        console.log(storage.a);
    }

這個在控制檯上面咱們就能夠看到已經a鍵已經被更改成4了
localStorage的刪除
一、將localStorage的全部內容清除
[JavaScript] 純文本查看 複製代碼
?
1
2
3
4
5
6
var storage=window.localStorage;

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

二、 將localStorage中的某個鍵值對刪除
[JavaScript] 純文本查看 複製代碼
?
1
2
3
4
5
6
var storage=window.localStorage;

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

控制檯查看結果

localStorage的鍵獲取
[JavaScript] 純文本查看 複製代碼
?
1
2
3
4
5
6
7
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);
        }

使用key()方法，向其中出入索引便可獲取對應的鍵
4、localStorage其餘注意事項
通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成爲字符串形式
這個時候咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串
示例：
[JavaScript] 純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
if(!window.localStorage){

console.log("瀏覽器支持localstorage");
    }else{
        var storage=window.localStorage;
        var data={
            name:'xiecanyong',
            sex:'man',
            hobby:'program'
        };
        var d=JSON.stringify(data);
        storage.setItem("data",d);
        console.log(storage.data);
    }

讀取以後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法
[JavaScript] 純文本查看 複製代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
var storage=window.localStorage;

var data={
            name:'xiecanyong',
            sex:'man',
            hobby:'program'
        };
        var d=JSON.stringify(data);
        storage.setItem("data",d);
        //將JSON字符串轉換成爲JSON對象輸出
        var json=storage.getItem("data");
        var jsonObj=JSON.parse(json);
        console.log(typeof jsonObj);

打印出來是Object對象 另外還有一點要注意的是，其餘類型讀取出來也要進行轉換更多技術資訊可關注：gzitcast