HTML5 本地儲存Web Storage

web storage功能，顧名思義，就是在web上針對客戶端本地儲存資料的功能，具體來說web storage分為兩種；

sessionstorage：

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

localstorage：

將資料儲存在客戶端本地的硬體裝置（通常指硬碟，當然可以是其他的硬體裝置）中，即是瀏覽器被關閉了，該資料仍然存在，下次開啟瀏覽器訪問**時，仍然可以繼續使用。

sessionstorage與localstorage區別：

這兩者的區別在於sessionstorage為臨時儲存，而localstorage為永久儲存。

接下來我們一起看一下：

sessionstorage：

將資料儲存在session物件中，所謂session是指使用者在瀏覽某個**時，從進入**到瀏覽器關閉所經過的這段時間會話，也就是使用者瀏覽這個**所花費的時間就是session的生命週期。session物件可以用來儲存在這段時間內所要求儲存的任何資料。

此物件主要有兩個方法：

儲存資料：sessionstorage.setitem(key, value);

讀取資料：sessionstorage.getitem(key);

key：表示你要存入的鍵名稱，此名稱可以隨便命名，可以按照變數的意思來理解。

value：表示值，也就是你要存入key中的值，可以按照變數賦值來理解。

使用方法：

儲存資料：sessionstorage.setitem("website", "websqq.com");

讀取資料：sessionstorage.getitem("website");

**案例：

[task]

[/task]

localstorage：

使用方法與sessionstorage如出一轍，如下**所示：

此物件主要有兩個方法：

儲存資料：localstorage.setitem(key, value);

讀取資料：localstorage.getitem(key);

key：表示你要存入的鍵名稱，此名稱可以隨便命名，可以按照變數的意思來理解。

value：表示值，也就是你要存入key中的值，可以按照變數賦值來理解。

使用方法：

儲存資料：localstorage.setitem("website", "websqq.com");

讀取資料：localstorage.getitem("website");

案例如下：

[task]

[/task]