HTML5在客戶端存儲數據的新方法——localStorage · 前端小冊

### HTML5在客戶端存儲數據的新方法——localStorage localStorage作為HTML5本地存儲web storage特性的API之一，主要作用是將數據保存在客戶端中，而客戶端一般是指上海網站設計用戶的計算機。在移動設備上，由于大部分瀏覽器都支持web storage特性，因此在android和ios等智能手機上的web瀏覽器都能正常使用該特性。 localStorage保存的數據，一般情況下是永久保存的，也就是說只要采用localstorage保存信息，數據便一直存儲在用戶的客戶端中。即使用戶關閉當前web瀏覽器后重新啟動，數據讓然存在。知道用戶或程序明確制定刪除，數據的生命周期才會結束。 ### cookie、 sessionStorage 、localStorage之間的區別和使用 cookie:存儲在用戶本地終端上的數據。有時也用cookies，指某些網站為了辨別用戶身份，進行session跟蹤而存儲在本地終端上的數據，通常經過加密。一般應用最典型的案列就是判斷注冊用戶是否已經登過該網站 HTML5 提供了兩種在客戶端存儲數據的新方法： localStorage - 沒有時間限制的數據存儲 sessionStorage - 針對一個 session 的數據存儲之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。使用場景： localStorage可以用來統計頁面訪問次數。 sessionStorage可以用來統計當前頁面元素的點擊次數。 cookie一般存儲用戶名密碼相關信息，一般使用escape轉義編碼后存儲。使用實例：刷新頁面會看到計數器在增長。請關閉瀏覽器窗口，然后再試一次，計數器會繼續計數。localStorage 對象存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。 ~~~ document.write("Visits "+ localStorage.pagecount + " time(s)."); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script> </html> ~~~ 重置：刷新頁面會看到計數器在增長。請關閉瀏覽器窗口，然后再試一次，計數器已經重置了。 ~~~ document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> </html> ~~~ 注意：nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。注意: Internet Explorer 7 及更早IE版本不支持web 存儲。因此：在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和~~~ sessionStorage: if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 對象! // 一些代碼..... } else { // 抱歉! 不支持 web 存儲。 } ~~~