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", "W3Cfuns.com");

讀取資料：sessionStorage.getItem("website");

代碼案例：

LocalStorage：

使用方法與SessionStorage如出一轍，如下代碼所示：

儲存資料：localStorage.setItem(Key, value);

讀取資料：localStorage.getItem(Key);

儲存資料：localStorage.setItem("website", "W3Cfuns.com");

讀取資料：localStorage.getItem("website");

案例如下：

<a href="http://www.cnblogs.com/asqq/archive/2012/06/20/2556944.html">HTML5--JS API-新的選擇器</a>

新的選擇器

document.querySelector("selector");

selector:根據CSS選擇器傳回第一個比對到的元素，如果沒有比對到，則傳回null;

支援： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.querySelectorAll("selector");

selector:根據CSS選擇器傳回所有比對到的元素數組，如果沒有比對到，則傳回空數組;

document.getElementsByClassName("selector");

selector:根據類選擇器傳回所有比對到的元素數組，如果沒有比對到，則傳回空數組;

支援： Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

HTML結構如下:

 1、如果想要獲得第一個li元素，我們隻需要:

document.querySelector(".content ul li");

2、如果想要獲得所有li元素，我們隻需要:

document.querySelectorAll(".content ul li");

3、如果想要獲得所有class為w3c的li元素，我們隻需要:

document.getElementsByClassName("w3c");