前端頁面之間存取值(Html5之sessionStorage、localStorage)
最近在做項目的時候，遇見一些問題：我在後臺取到數據之後，需要把這些數據在N個頁面中進行使用，如果每次都要去服務器查找數據，那麼就會給服務器帶來很大的壓力。爲了避免重複取帶來的壓力，遂把數據保存在前端頁面中。每次需要取值的時候，只需要在前端頁面中取值，而不必去後臺服務器中查詢數據，那麼具體是存在哪裏呢？我這裏是保存在Html5的web storage，Html5中具有sessionStorage和localStorage兩個存儲域。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並
且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地“存儲”數據而生。
在使用web storage時，我們需要判斷瀏覽器是否支持。通過下面的代碼即可判斷
if(window.localStorage||typeof window.localStorage != 'undefined'),只要這兩個條件中滿足其中
之一，那麼這個瀏覽器就是支持localStorage的，我們就可以把數據存儲在這裏面，然後在其他頁面取數據
具體的操作方式
存數據：setItem(key,value)
取數據：getItem(key,value)
通過key移出指定的數據：removeItem(key)
清空數據：clear()
除此之外，localStorage和sessionStorage還提供了key和length屬性實現遍歷
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value); }