SessionStorage LocalStorage cookie三者區別
阿新 • • 發佈:2019-01-29
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間儲存資料。有了本地資料,就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。 sessionStorage、localStorage、cookie都是在瀏覽器端儲存的資料,其中sessionStorage的概念很特別,引入了一個“瀏覽器視窗”的概念。sessionStorage是在同源的同窗口(或tab)中,始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉,即使重新整理頁面或進入同源另一頁面,資料仍然存在。關閉視窗後,sessionStorage即被銷燬。同時“獨立”開啟的不同視窗,即使是同一頁面,sessionStorage物件也是不同的。 Web Storage帶來的好處:減少網路流量:一旦資料儲存在本地後,就可以避免再向伺服器請求資料,因此減少不必要的資料請求,減少資料在瀏覽器和伺服器間不必要地來回傳遞。快速顯示資料:效能好,從本地讀資料比通過網路從伺服器獲得資料快得多,本地資料可以即時獲得。再加上網頁本身也可以有快取,因此整個頁面和資料都在本地的話,可以立即顯示。臨時儲存:很多時候資料只需要在使用者瀏覽一組頁面期間使用,關閉視窗後資料就可以丟棄了,這種情況使用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 和 localStorage 之間的區別見上面的區別3、4 sessionStorage與頁面 js 資料物件的區別頁面中一般的 js 物件或資料的生存期是僅在當前頁面有效,因此重新整理頁面或轉到另一頁面這樣的重新載入頁面的情況,資料就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,重新整理頁面或進入同源的不同頁面,資料始終存在。也就是說只要這個瀏覽器視窗沒有關閉,載入新頁面或重新載入,資料仍然存在。 cookie,容量4kb,預設各種瀏覽器都支援,缺陷就是每次請求,瀏覽器都會把本機存的cookies傳送到伺服器,無形中浪費頻寬。 userdata,只有ie支援,單個容量64kb,每個域名最多可存10個共計640k資料。預設儲存在C:\Documents and Settings\Administrator\UserData\目錄下,儲存格式為xml。關於userdata更多資料參考http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp sessionStorage與localStorage Web Storage實際上由兩部分組成:sessionStorage與localStorage。 sessionStorage用於本地儲存一個會話(session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存,僅僅是會話級別的儲存。 localStorage用於持久化的本地儲存,除非主動刪除資料,否則資料是永遠不會過期的。 為什麼選擇Web Storage而不是Cookie? 與Cookie相比,Web Storage存在不少的優勢,概括為以下幾點: 1. 儲存空間更大:IE8下每個獨立的儲存空間為10M,其他瀏覽器實現略有不同,但都比Cookie要大很多。 2. 儲存內容不會發送到伺服器:當設定了Cookie後,Cookie的內容會隨著請求一併傳送的伺服器,這對於本地儲存的資料是一種頻寬浪費。而Web Storage中的資料則僅僅是存在本地,不會與伺服器發生任何互動。 3. 更多豐富易用的介面:Web Storage提供了一套更為豐富的介面,使得資料操作更為簡便。 4. 獨立的儲存空間:每個域(包括子域)有獨立的儲存空間,各個儲存空間是完全獨立的,因此不會造成資料混亂。