sessionStorage、localStorage簡介

簡介

　　技術通常水平有限，有什麼錯的地方，望你們指正。

　　sessionStorage、localStorage、cookie這三個是咱們在瀏覽器端用來存儲數據的，cookie使用起來較爲繁瑣之後進行總結，主要介紹一下sessionStorage和localStorage的用法。sessionStorage和localStorage都是在瀏覽器端用來存儲數據的對象，它們也只在瀏覽器裏有做用不會被髮送到服務器端。

sessionStorage

　　sessionStorage存活週期就是會話開始直到結束的這段時間，就是從咱們打開一個瀏覽器窗口到關閉瀏覽器窗口的這段時間內都是有效的，不管是刷新開始從新打開頁面當前的sessionStorage都是有效的。當咱們在打開一個新窗口的時候就會從新再建立一個sessionStorage對象。

　　sessionStorage在咱們打開瀏覽器是被建立，它只能在當前的域名中有效，從新輸入一個網址後就會從新建立一個新的sessionStorage對象，可是隻要咱們不關閉當前的窗口咱們在從新輸入原網址的時候，原來的sessionStorage仍然是可用的。

　　例如：

　　咱們先打開百度，在console中輸入sessionStorage.name = "百度"，而後在地址欄中輸入google的網址，咱們發現google裏面是沒有sessionStorage.name這個屬性的，咱們在向url中輸入百度的網址，sessionStorage.name仍然是存在的。咱們每打開一個網址就會建立一個sessionStorage對象，而且該sessionStorage對象只在當前的域名內有效，當咱們關閉瀏覽器時sessionStorage對象就會消亡。

　　sessionStorage是一個對象因此咱們就能夠經過"."來建立屬性和使用屬性例如：

sessionStorage.name = "zt";
sessionStorage.age = 23
sessionStorage.name//zt

　　sessionStorage一樣也給咱們提供了幾個API來官方了一下咱們的使用，咱們經常使用的就是下面這幾個：

　　length：sessionStorage.length返回當前sessionStorage對象下面有幾個屬性。

　　setItem:sessionStorage.setItem("_key","value")爲sessionStorage添加一個屬性並賦值，等同與sessionStorage._key = value。

　　setItem：sessionStorage.getItem("_key")獲取sessionStorage對象上的key屬性的值，等同於sessionStorage._key。

　　removeItem：sessionStorage.removeItem("_key")刪除sessionStorage對象上的一個屬性，等同於sessionStorage._key = null。

　　clear：sessionStorage.clear()清空sessionStorage上面的全部的屬性。

　　sessionStorage.getItem()在一些狀況下是不能被替代的,例如咱們經過sessionStorage.setItem("key","isKey"),設置了一個key的屬性，而sessionStorage原型上是有一個key方法的,若是咱們sessionStorage.key的話就會去訪問key方法，而經過sessionStorage.getItem("key")就能夠訪問到key屬性，可是必定避免咱們存儲的屬性名和原型上的方法名同名。

　　sessionStorage只能用來存儲字符串：

var arr = [1,2,3];
sessionStorage.data = arr;
sessionStorage.data//1,2,3

　　咱們想存儲一個數組，雖然存進去了可是當咱們取出來的時候，發現已經面目全非了，若是要把對象存儲在sessionStorage上，首先要先對對象進行一個序列化爲字符串的操做，使用時在進行反序列化：

var arr = [1,2,3];
sessionStorage.data = JSON.stringify(arr);
JSON.parse(sessionStorage.data)//[1,2,3]

　　一般咱們對sessionStorage的使用就是記錄一個表單的信息。好比在填寫一個複雜的表單時，用戶可能會不經意間刷新了網頁，這樣填寫的信息就白填了，一般咱們利用sessionStorage來存儲用戶填寫的信息，當用戶發送表單後咱們在清空信息，這樣即便用戶刷新了瀏覽器也能夠保留住剛剛填寫的信息。

localStorage

　　localStorage在API上的使用上和sessionStorage是一致的。不一樣之處在於，localStorage不會消亡，只要建立了而且咱們沒有手動銷燬（或者清除瀏覽器歷史）就會一直存在於咱們的瀏覽器中。每個域名都會建立一個localStorage，當前域名只能訪問本身的localStorage。localStorage是一直存在於本地的因此咱們利用的較爲多一些，最近在的項目中用了一次，就是保存用戶對一個報表的排序設置，這樣每次頁面加載的時候從localStorage讀取用戶的配置，發送到服務器，按照這個順序返回數據。博客園在寫博文時候的自動保存也是利用的localStorage，靈活使用localStorage能夠給用戶帶來極大的便利。