我們知道，HTML5新增了很多新特性，其中一個就是本地儲存（Local Storage）。但是從目前來看，不少開發者並沒有很好的使用此特性。
簡單來說，HTML5推出的Local Storage是為了避免資料在瀏覽器和伺服器間不必要的資料傳遞，Local Storage屬於Web Storage。很多時候有一些資料需要在客戶端儲存，這種情況下使用Local Storage就很適合了，因為Local Storage可以儲存的資料容量比Cookie要大很多。
Local Storage在不同瀏覽器中的支援程度不同、資料容量也不同，一般可以儲存5M左右資料，而Cookie一般只能儲存4K大小的資料。
以Chrome瀏覽器為例，開啟除錯模式（頁面處右擊》檢查》Application）就能看到Local Storage資料。
Local Storage本地儲存它有不少特性，主要有以下幾點：
僅在客戶端儲存，不會和伺服器端進行通訊；
儲存的都是String型別資料（所有資料都會自動轉為字串進行儲存）；
它是永久性儲存（除非人為手動清理）；
也有同源策略，不同網站無法共用Local Storage。
上面說到了Local Storage有個特性就是它是永久性儲存，預設沒有過期時間的，它不像Cookie可以設定TTL。那該如何模擬Local Storage過期時間呢？這裡給的方案思路是這樣的：
1、我們在設定Key時在內容之後加上過期時間戳（比如以特定符號進行分隔），或者每個Key對應附加一個過期時間的Key，如名為 keyName+"expires" 的Key；
我們知道，HTML5新增了很多新特性，其中一個就是本地儲存（Local Storage）。但是從目前來看，不少開發者並沒有很好的使用此特性。
什麼是Local Storage？簡單來說，HTML5推出的Local Storage是為了避免資料在瀏覽器和伺服器間不必要的資料傳遞，Local Storage屬於Web Storage。很多時候有一些資料需要在客戶端儲存，這種情況下使用Local Storage就很適合了，因為Local Storage可以儲存的資料容量比Cookie要大很多。
Local Storage在不同瀏覽器中的支援程度不同、資料容量也不同，一般可以儲存5M左右資料，而Cookie一般只能儲存4K大小的資料。
以Chrome瀏覽器為例，開啟除錯模式（頁面處右擊》檢查》Application）就能看到Local Storage資料。
Local Storage的特性Local Storage本地儲存它有不少特性，主要有以下幾點：
僅在客戶端儲存，不會和伺服器端進行通訊；
儲存的都是String型別資料（所有資料都會自動轉為字串進行儲存）；
它是永久性儲存（除非人為手動清理）；
也有同源策略，不同網站無法共用Local Storage。
Local Storage如何設定過期時間？上面說到了Local Storage有個特性就是它是永久性儲存，預設沒有過期時間的，它不像Cookie可以設定TTL。那該如何模擬Local Storage過期時間呢？這裡給的方案思路是這樣的：
1、我們在設定Key時在內容之後加上過期時間戳（比如以特定符號進行分隔），或者每個Key對應附加一個過期時間的Key，如名為 keyName+"expires" 的Key；