HTML5本地存儲Web Storage講解

Web?Storage功能，顧名思義，就是在Web上針對客戶端本地儲存數據的功能，具體來說Web?Storage分為兩種；

sessionStorage：

將數據保存在session對象中，所謂session是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。

localStorage：

將數據保存在客戶端本地的硬件設備（通常指硬盤，當然可以是其他的硬件設備）中，即是瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時，仍然可以繼續使用。

sessionStorage與localStorage區別：

這兩者的區別在于sessionStorage為瀏覽器臨時保存，而localStorage為硬件設備永久保存。即localStorage沒有過期時間，只要不clear或remove，數據會一直保存。

sessionStorage?針對一個session進行數據存儲，生命周期與session相同，當用戶關閉瀏覽器后，數據將被刪除。

接下來我們一起看一下：

SessionStorage：

將數據保存在session對象中，所謂session是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間會話，也就是用戶瀏覽這個網站所花費的時間就是session的生命周期。session對象可以用來保存在這段時間內所要求保存的任何數據。

此對象主要有兩個方法：

保存數據：sessionStorage.setItem(Key,?value);

讀取數據：sessionStorage.getItem(Key);

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

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

使用方法：

保存數據：sessionStorage.setItem("website",?"W3Cfuns.com");

讀取數據：sessionStorage.getItem("website");

代碼：

LocalStorage：

localStorage?默認支持的容量為5M，當調用setItem超過上限時，會觸發QuotaExceededError異常。當然有些瀏覽器支持修改容量上限，但為了兼容其他瀏覽器，最好按5M的容量來使用。

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

此對象主要有兩個方法：

保存數據：localStorage.setItem(Key,?value);

讀取數據：localStorage.getItem(Key);

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

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

使用方法：

保存數據：localStorage.setItem("website",?"W3Cfuns.com");

讀取數據：localStorage.getItem("website");

案例：

HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。