網頁設計之HTML5初級教學(9)-Web storage 簡介
HTML5要儲存用戶端瀏覽資料只能靠cookies,自從有了Web storage讓一切變得超容易!
Web Storage 的優點 (與 cookies 比較)：
1. 更安全
2. 過往儲存於 cookies 中的資料，會在用戶端瀏覽器與伺服器之間運行：因為每次用戶端瀏覽器送出 request 至伺服器時，cookies 就會跟著被夾帶，就會占用到頻寬，而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器，不會在用戶端瀏覽器與伺服器之間運行，所以就不需要占用網路頻寬。
3. 以往 cookies 最多只能儲存 4KB 的資料，而 HTML5 Web Storage 的儲存空間大得多，其容量依各個瀏覽器而不同，但是一般都至少有 5MB。
4. 速度更快
Web Storage 有分兩種：sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。
數據的生命期
localStorage：儲存於 localStorage 的資料可永久保存，可以利用跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開，localStorage 仍然會存在，永不逾期，除非被清除。
sessionStorage：sessionStorage 的生命周期只存在於瀏覽器的單一分頁，也就是另開新分頁的話，又是一個新的 sessionStorage。除非另外設定逾期時間，否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript裡
有效範圍
儲存於 local storage 的資料可以跨分頁（tab）運作，session storage 則不行。
用法
sessionStorage 和 localStorage 的語法都比較簡單而且類似。其他資料都是以 key/value pairs 的形式儲存。
儲存資料
localStorage.setItem("Key名稱", "字串值");
取得資料
//this will print the value
alert(localStorage.getItem("Key名稱"));
移除資料
localStorage.removeItem("Key名稱");
移除所有資料
localStorage.clear();
以上的語法是以 localStorage 為例來示範，若是用儲存於 sessionStorage，把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。
更多閱讀:
網頁設計之HTML5初級教學(10)-地理位置定位介紹
電子書也可以翻得很自然?靠的是這招HTML5教學!
專家不藏私HTML5教學之1-想要網頁舒服好閱讀,排版是關鍵
達內教育開幕 培養台灣IT人才進入全球企業
不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!
CSS選擇器宣告法-初階前端工程師入門
今天把RWD和AWD的優劣和差別整理出來了!前端工程師有福啦!
