HTML5 Web 存儲
HTML5 web 存儲,一個比cookie更好的本地存儲方式。
什麼是HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是cookies。 但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.
數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。
瀏覽器支持
Internet Explorer 8+, Firefox, Opera, Chrome, 和Safari支持Web 存儲。
注意: Internet Explorer 7及更早IE版本不支持web存儲.
localStorage 和sessionStorage
客戶端存儲數據的兩個對象為：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個session 的數據存儲
在使用web 存儲前,應檢查瀏覽器是否支持localStorage 和sessionStorage:
if ( typeof ( Storage ) !== " undefined " )
{
// 是的!支持localStorage sessionStorage對象!
// 一些代碼.....
} else {
// 抱歉!不支持web存儲。
}
localStorage 對象
localStorage 對象存儲的數據沒有時間限制。 第二天、第二週或下一年之後，數據依然可用。
實例
localStorage . lastname = " Smith " ; document . getElementById ( " result " ) . innerHTML = " Last name: " + localStorage . lastname ;
嘗試一下»
實例解析：
- 使用key="lastname" 和value="Smith" 創建一個localStorage 鍵/值對
- 檢索鍵值為"lastname" 的值然後將數據插入id="result"的元素中
提示:鍵/值對通常以字符串存儲，你可以按自己的需要轉換該格式。
下面的實例展示了用戶點擊按鈕的次數. 代碼中的字符串值轉換為數字類型:
實例
if ( localStorage . clickcount )
{
localStorage . clickcount = Number ( localStorage . clickcount ) + 1 ; }
else
{
localStorage . clickcount = 1 ; }
document . getElementById ( " result " ) . innerHTML = " 你已經點擊了按鈕 " + localStorage . clickcount + " 次 " ;
嘗試一下»
sessionStorage 對象
sessionStorage 方法針對一個session 進行數據存儲。 當用戶關閉瀏覽器窗口後，數據會被刪除。
如何創建並訪問一個sessionStorage：:
實例
if ( sessionStorage . clickcount )
{
sessionStorage . clickcount = Number ( sessionStorage . clickcount ) + 1 ; }
else
{
sessionStorage . clickcount = 1 ; }
document . getElementById ( " result " ) . innerHTML = " 在這個會話中你已經點擊了該按鈕 " + sessionStorage . clickcount + " 次 " ;
嘗試一下»