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可以給用戶帶來極大的便利。