1. 程式人生 > >H5學習之-----local storage

H5學習之-----local storage

1.

HTML5 提供了兩種在客戶端儲存資料的新方法:

  • localStorage - 沒有時間限制的資料儲存
  • sessionStorage - 針對一個 session 的資料儲存

之前,這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存,因為它們由每個對伺服器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中,資料不是由每個伺服器請求傳遞的,而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。

對於不同的網站,資料儲存於不同的區域,並且一個網站只能訪問其自身的資料。

HTML5 使用 JavaScript 來儲存和訪問資料。

local storage特性:

(1)localStorage 方法儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用。

如何建立和訪問 localStorage:

次效果可以完成使用者對頁面的訪問次數:

使用window.localstorage進行相關的條件賦值:

首先通過var storage=window.localstorage()進項視窗物件的例項化,並確定作用域。

程式碼效果如下:

localstorage的儲存特性:

(1):儲存無時間進行限制。

(2):localstorage只能儲存字串,當儲存json格式的時候,需要去進行相應的轉換。

使用localstorage去儲存json型別的資料,程式碼如下:

驗證結果如下:

根據儲存驗證可以得知localstorage儲存資料是無序的:

如下圖可是,儲存的是根據物件進行讀取。

進行輸出可以得知如下:

 

後面的資料,對前面的資料,進行了一定程度的覆蓋,由此可知,定義總的輸入的key是十分有必要的引數。

驗證可以得知如下結論:

儲存是無順序的,但是需要通過例項的名稱對資料進行呼叫,從使用者的角度,此時的例項名可理解為:key,一組傳入資料的key:

左邊為localstorage在本地所儲存的所有資料,右邊為通過物件(充當key)來獲取子串(key對映來獲取value)值的過程:

詳細程式碼如下:

至此為localstorage的詳細儲存以及呼叫獲取過程,驗證可知,1234可作為整組(傳入整組json的key值),結論驗證如下:

通過發F12驗證檢視localStorage可以得知根據:

程式碼var lsp=function(dataid){

this.dataid=dataid;

return dataid;

}

來確定創進來json的key.

localstorage本質儲存的儲存格式,以及資料操作的入庫,和讀取操作(驗證如上),結論,是屬於key/value格式的儲存結構。