web本地存儲localStorage和sessionStorage

     用谷歌瀏覽器調試網頁程序時候發現有一個這個欄目

記錄本地存儲的相關信息（cookie,sessionStorage,LocalStorage等）的存儲信息

1.LocalStorage

localstorage是用於取代cookie的一些應用場景 cookie的大小隻能是4KB且會跟在url的頭中傳輸，locatlstorage的優點在於如下幾點：

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

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

缺點也有：

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

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換

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

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

五、localStorage不能被爬蟲抓取到

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

這裏咱們以localStorage來分析

 

2.sessionStorage

1) 同源策略限制。若想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下。(IE 8和9存儲數據僅基於同一主機名，忽略協議（HTTP和HTTPS）和端口號的要求)

2) 單標籤頁限制。sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據。

3) 只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據。(若使用Chrome的恢復標籤頁功能，seesionStorage的數據也會恢復)。

4) 存儲方式。seesionStorage的存儲方式採用key、value的方式。value的值必須爲字符串類型(傳入非字符串，也會在存儲時轉換爲字符串。true值會轉換爲"true")。

5) 存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。

可訪問 http://dev-test.nemikor.com/web-storage/support-test/ 測試瀏覽器的存儲上限。

 

session是會話性質的當前瀏覽器的窗口沒關閉就一直存儲,關閉就銷燬

3.sessionStorage和localstorage例子

寫一個網頁存儲而且跳轉到新網頁檢測存儲的數字是否依然存在

代碼：

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<input id="keyValue" type="text"/>
<button id="btn1">
    保存LocalStorage的key
</button>

<button id="btn2">
    保存SessionStorage的key
</button>

<button id="btn3">
    打開新的網頁
</button>

<script>
    $(function () {
        //保存locationStorage
        $("#btn1").click(function () {
            window.localStorage.setItem("key", $("#keyValue").val().trim());
        })
        //保存SessionStorage
        $("#btn2").click(function () {
            window.sessionStorage.setItem("key", $("#keyValue").val().trim());
        })
        //跳轉到新網頁 
        $("#btn3").click(function () {
            location.href = "/Home/OpenNewHtml"
        })
    })
</script>

 

此時使用谷歌瀏覽器查詢看值

 

 

 1.關閉瀏覽器後 再打開進入這個網頁 local存在，session消失（localStorage永久保存,session是會話性質）

 2.在本頁面打開新的窗口兩個都存在

4.注意點

1.語法：

 string sessionStorage.key(int index) ：返回當前 sessionStorage 對象的第index序號的key名稱。若沒有返回null。

 string sessionStorage.getItem(string key) ：返回鍵名(key)對應的值(value)。若沒有返回null。

 void sessionStorage.setItem(string key, string value) ：該方法接受一個鍵名(key)和值(value)做爲參數，將鍵值對添加到存儲中；若是鍵名存在，則更新其對應的值。

 void sessionStorage.removeItem(string key) ：將指定的鍵名(key)從 sessionStorage 對象中移除。

 void sessionStorage.clear() ：清除 sessionStorage 對象全部的項。

插入時候有如下幾種寫法：

var storage=window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=1;
            //寫入c字段
            storage.setItem("c",3);

2.兩種本地存儲都是以字符串形式存儲

通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成爲字符串形式

這個時候咱們能夠使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串