今天有點不想整理了 ，明天開始~~

哈哈哈，大清早的來整理博客啦

什么是localStorage sessionStorage?這兩個是H5新增特性，html5中的Web Storage包括了兩種存儲方式localStorage sessionStorage,是html5 web storage API提供的，可以方便在web請求之間保存數據，有了本地數據，就可以避免數據在瀏覽器和服務器間不必要的來回傳遞

這兩個特性在瀏覽器的哪里呢，先上圖看看

好了，現在開始學習吧，說到這個順帶也把cookie一起說上吧

先說應用場景：

cookie屬于起源較早的，它比較小，大概只有4KB左右。我們在登錄某個網站時候，通常會有記住密碼這一選項，這個就是通過cookie中存入一頓辨別用戶身份的數據來實現的，服務器根據密碼生成了一段暗文，然后返回給用戶存儲起來，用戶以后再登錄時候，就會帶著這段暗文去服務器端校驗，缺點是每次HTTP請求時都會帶著cookie，所以說cookie存儲的數據越少越好

如果要使用localStorage和sessionStorage，首先要看瀏覽器是否支持本地存儲，本地存儲是一個window的屬性，所以我們可以先檢測瀏覽器是否支持，檢查是否支持可以用window.localStorage||window.sessionStorage來檢測

localStorage：是H5標準中新加入的技術，存儲方法就是直接給window.localStorage添加一個屬性，如

var localStorage=window.localStorage;localStorage.first = 3;//設置a為"3"localStorage["first"] = "sfsf";//設置first為"sfsf"，覆蓋上面的值localStorage.setItem("second","hahha");//設置second為"hahha"var a1 = localStorage["first"];//獲取first的值var a2 = localStorage.first;//獲取first的值var b = localStorage.getItem("second");//獲取second的值localStorage.removeItem("second");//清除c的值顯示結果如下：
sessionStorage用法與其類似，這里就不再贅述了，注意，storage只能存儲字符串，至于其他的類似對象或者json串需要做下轉換即可
var obj = { name:'Jim' }; var str = JSON.stringify(obj); //存入 sessionStorage.obj = str; //讀取 str = sessionStorage.obj; //重新轉換為對象 obj = JSON.parse(str);
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口后，sessionStorage即被銷毀。同時“獨立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的。
webStorage帶來的好處：
1、在用戶斷網的情況下，可以從storage中獲取信息，這對于尤其是在航空旅行中的用戶來說很有幫助
2、減少網絡流量：一旦數據保存在本地后，就可以避免再向服務器請求數據，因此減少不必要的數據請求，減少數據在瀏覽器和服務器間的來回傳遞
3、快速顯示數據：性能好，從本地讀取數據比通過網絡從服務器獲取數據快的多，本地數據可以及時獲得，在加上整個頁面和數據都在本地的話，可以立即顯示
４、臨時存儲：很多數據只需要在用戶瀏覽一組頁面期間使用，關閉窗口后數據就可以丟失了，這種情況sessionstorage很方便
------------------------------------------------------------------------------------------------------------
好了，大概就寫這些了，下面這些從別處博客看到的覺得不錯，所以就拷貝來了
瀏覽器本地存儲與服務器端存儲之間的區別其實數據既可以在瀏覽器本地存儲，也可以在服務器端存儲。瀏覽器端可以保存一些數據，需要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。服務器端也可以保存所有用戶的所有數據，但需要的時候瀏覽器要向服務器請求數據。1.服務器端可以保存用戶的持久數據，如數據庫和云存儲將用戶的大量數據保存在服務器端。2.服務器端也可以保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id即可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。服務器端保存所有的用戶的數據，所以服務器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數據分布保存在用戶各自的瀏覽器中。瀏覽器端一般只用來存儲小數據，而服務器可以存儲大數據或小數據。服務器存儲數據安全一些，瀏覽器只適合存儲一般數據。sessionStorage 、localStorage 和 cookie 之間的區別共同點：都是保存在瀏覽器端，且同源的。區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。sessionStorage與頁面 js 數據對象的區別頁面中一般的 js 對象或數據的生存期是僅在當前頁面有效，因此刷新頁面或轉到另一頁面這樣的重新加載頁面的情況，數據就不存在了。而sessionStorage 只要同源的同窗口（或tab）中，刷新頁面或進入同源的不同頁面，數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉，加載新頁面或重新加載，數據仍然存在。