1. 程式人生 > >HTML5基礎(Web Storage)

HTML5基礎(Web Storage)

Cookies的弊端

        在html5中,除了增加Canvas之外,還增加了一個非常重要的功能,那就是可以在客戶端本地儲存資料的Web Storage。
之前我們使用Cookies來儲存本地一些資料,但是Cookies存在如下問題:

  1. 大小:Cookies的大小被限制在4KB
  2. 頻寬::Cookies是隨著Http事務一起被髮送的,會浪費不必要的頻寬
  3. 複雜性:要正確操作Cookies是比較複雜的

Web Storage綜述

Web Storage功能就是在Web上儲存資料的功能,這裡的儲存是針對客戶端本地而言的。
具體分兩種:sessionStorage和localStorage。

sessionStorage

將資料儲存在session物件中。
session是指使用者在瀏覽某個網站時,從進入網站到瀏覽器關閉所經過的這段時間,也就是使用者瀏覽這個網站所花費的時間。
session物件可以用來儲存在這段時間內所要求儲存的任何資料。


localStorage

localStorage將資料儲存在客戶端本地的硬體裝置(硬碟)中,即使瀏覽器被關閉了,該資料仍然存在,下一次開啟瀏覽器訪問網站時仍然可以繼續使用。

Web Storage使用方法

不論是sessionStorage還是localStorage,都是以鍵值對的方式儲存的資料

sessionStorage

sessionStorage.setItem("message","messageContent");   //儲存資料
sessionStorage.getItem("message");                    //讀取資料

localStorage

localStorage.setItem("message","messageContent");   //儲存資料
localStorage.getItem("message");                    //讀取資料