網頁設計之HTML5初級教學(9)-Web storage 簡介

網頁設計之HTML5初級教學(9)-Web storage 簡介
HTML5要儲存用戶端瀏覽資料只能靠cookies,自從有了Web storage讓一切變得超容易!
在過去的 HTML5 ,前端工程師要在用戶端瀏覽器儲存資料,會使用 cookies。HTML5 新增了 Web Storage 功能,取代了只能儲存 4kb 的 cookies。
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的優劣和差別整理出來了!前端工程師有福啦!

熱門文章