為了破解Cookie的一系列限制（主要是cookie的大小和多少都受限制，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了頻寬，另外cookie還需要指定範圍，不可以跨域調用），HTML5通過JS的新的API就能直接儲存大量的資料到用戶端瀏覽器，而且支援複雜的本機資料庫，讓JS更有效率。HTML5支援兩種的WebStorage：永久性的本機存放區（localStorage），會話層級的本機存放區（sessionStorage）。下面就讓我們來瞭解一下HTML5如何使用Web Storage儲存，介紹Web Storage儲存的2種方式，希望對大家有所協助！
一：localStorage（永久性的本機存放區）
一直儲存在本地，資料存放區是永久的，除非使用者或程式對其進行刪除操作；localStorage Object Storage Service的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。
特點：
① 域內安全、永久儲存。即用戶端或瀏覽器中來自同一網域名稱的所有頁面都可訪問localStorage資料且資料除了刪除否則永久儲存，但用戶端或瀏覽器之間的資料相互獨立。
② 資料不會隨著Http請求發送到後台伺服器；
③ 儲存資料的大小機會不用考慮，因為在HTML5的標準中要求瀏覽器至少要支援到4MB。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>localStorage</title></head><body><script type="text/javascript"> //添加key-value 資料到 localStorage localStorage.setItem("localStorage", "http://127.0.0.1:8020"); //通過key來擷取value var dt = localStorage.getItem("localStorage"); alert(dt); //清空所有的key-value資料。 //localStorage.clear(); alert(localStorage.length); </script></body></html>
：
localStorage提供了四個方法來輔助我們進行對本機存放區做相關操作。
（1）setItem(key,value)：添加本機存放區資料。兩個參數，非常簡單就不說了。
（2）getItem(key):通過key擷取相應的Value。
（3）removeItem(key):通過key刪除本機資料。
（4）clear():清空資料。
二.sessionStorage（會話層級的本機存放區）
在會話期內有效，資料在瀏覽器關閉後自動刪除；
特點：會話控制、短期儲存。會話概念與伺服器端的session概念相似，短期儲存指視窗或瀏覽器或用戶端關閉後自動消除資料。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>sessionStorage</title></head><body><script type="text/javascript"> //添加key-value 資料到 sessionStorage sessionStorage.setItem("sessionStorage", "http://127.0.0.1:8020"); //通過key來擷取value var dt = sessionStorage.getItem("sessionStorage"); alert(dt); //清空所有的key-value資料。 //sessionStorage.clear(); alert(sessionStorage.length); </script></body></html>
：
sessionStorage提供了四個方法來輔助我們進行對本機存放區做相關操作。
（1）setItem(key,value)：添加本機存放區資料。兩個參數，非常簡單就不說了。
（2）getItem(key):通過key擷取相應的Value。
（3）removeItem(key):通過key刪除本機資料。
（4）clear():清空資料。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
