Pages

Subscribe:

Ads 468x60px

Labels

顯示具有 HTML5 標籤的文章。 顯示所有文章
顯示具有 HTML5 標籤的文章。 顯示所有文章

2016年9月26日 星期一

Java 資源整理

找到一個網站
有關Java的整理相關齊全
推薦給各位

http://www.java2s.com/

2015年8月5日 星期三

RWD響應式網頁設計

HTML5 UP
http://html5up.net/

煦婚嫁 Frei Bridal
http://www.fbridal.com.tw/

https://www.freshdesignweb.com/free-html5-css3-templates/

http://designscrazed.org/free-responsive-html5-css3-templates/

http://w3layouts.com/free-responsive-html5-css3-website-templates/

玉荷軒 http://www.yuihoshien.com/index.php


DW網頁設計商業應用學習流程_RWD響應式網頁設計模版套修階段學習方法

2015年7月30日 星期四

讓你的 HTML Table Responsive 吧!

資料來源

RWD-table
客戶表示:哎呀,我的這個表格在手機版字都擠在一起不好閱讀阿!
Web Dev:那…我們是不是要另外 layout 一個專屬行動裝置的表格?
凱西 :唷齁!其實有很多別的方法可以嘗試呢!
這篇文章主要是討論多欄位的 HTML Table  實現 Responsive 的實作。
以下所探討的各種關鍵,在 25lab 都可以找到相對應的 Sample 可以觀看。

在桌機的閱讀模式下,網頁的觀看通常是寬大於高的。
所以在 Table 的排版上,常常會以橫向的 thead 與 th 去排列所有的欄位。
舉例來說,就是像下圖這樣充滿知性的樣子(感謝Bruce的Sample):
RWD-table-1
但!當你的網頁要 Responsive 時,你會怎麼做呢?
行動裝置通常拿在手上觀看時,都是直式的螢幕畫面,
你的 Table 就會變成連火星人都看不懂的宇宙模式。
這時候只想大叫:神阿!誰來救救我吧!我受夠 Table 了。
RWD-table-2
在我過去寫前台網頁的一年內,我幾乎都是做一個手機版的 Table,
將上方多欄位的 th 改成一行一行的  tr,也就是的 X軸 和 Y軸 交換過來。
然後在 960寬 以上的螢幕,顯示出原本 知性的 Table,
960寬 以下的螢幕,顯示出我偷偷做好的另一個 Table。
大概就會長得像下面這樣(再次感謝 Bruce Sample):
RWD-table-3
你這樣聽起來可能沒有很麻煩,但你只要打開程式碼一看。
你就會知道你要把一個一個 td 重新排過多麼令人想吐。

這讓我不禁想要好好的思考,
揪竟要怎麼讓 Table Responsive 才能省工又 Make Sense?
最後得出了幾個關鍵,就來跟大家分享一下啦!

#關鍵一:隱藏某些項目

如果你的資料並不是每個欄位都很必要,其實可以在不同尺寸的行動裝置,隱藏某些欄位。
RWD-table-4

#關鍵二:讓你的 Table 可以水平 scroll

這有兩種作法-
簡單的是,在你的 table 外面包一個 DIV,over-flow:scroll-x;
麻煩的是把 thead 換至左方 fixed, 水平 scroll 原有的 content。
( 使用這個方法的話,每個欄位的 th 與  td 需套上 white-space: nowrap; 所以你的  Content 完全無法有換行。)
RWD-table-5

#關鍵三:破壞 Table 的排版

將每個 tr row 分為一個一個的區塊,每個區塊都有一樣的 thead 內容。
這樣的缺點就是網頁可能會拉的很長、且thead內容會重複很多次,但是優點是所有的資料都會完整的呈現。
( 使用此方法,你需利用到 element 的 attr 以及偽元素的使用:before)
RWD-table-6

#關鍵四:其實可以不用那麼依賴 Table

你知道,使用 CSS 跟 DIV 就可以排出一模一樣的 Table 嗎?
你可以深入學習,所有的 display type
運用 display : table;  display : table-row;  display : table-cell;
就可以創造出純 DIV 的 Table UI。
   
      
         
門市編號
         
門市類型
      
   
      
01
      
品牌形象店
   
   
      
02
      
品牌形象店
   

並沒有所謂怎樣的作法最好,而是看你的需求,
哪一個可以避免你製作兩種版面,且又符合你的需求。

2015年7月8日 星期三

HTML5 教學範例

關於 HTML5 教學, 以下30多個資源可幫你開始學習HTML5。

BLOWING UP HTML5 VIDEO AND MAPPING IT INTO 3D
SPACE(將HTML5視訊吹散並組成3D效果)

最近我研究了HTML 5中的Canvas 和Video
標籤,並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

CODE A BACKWARDS COMPATIBLE, ONE PAGE PORTFOLIO
WITH HTML5 AND CSS3(用HTML5 和CSS3 打造向下相容的網頁)

HTML5更加語義化,使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag,比如 navigations
和 footers 使語法更有意義也更接近自然語言。

CODING A HTML 5 LAYOUT FROM SCRATCH(HTML 5
佈局)

這篇文章將教你
  • 用原有技術將元素放置在特定位置
  • 最新的技術潮流
  • Microformats與HTML5協同使用
  • 介紹HTML5與CSS3的新特性

CODING A CSS3 AND HTML5 ONE PAGE WEBSITE
TEMPLATE(製作CSS3和 HTML5 一頁式網站樣板)

這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5
仍在完善當中,你也可以選擇性的下載XHTML版。

COMPREHENSIVE VIDEO TUTORIAL ON
HTML5(全面的HTML5視訊指南)

這是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

CREATE MODERN WEB SITES USING HTML5 AND
CSS3(用HTML5與CSS3打造時尚網站)

這篇文章介紹了許多HTML5的功能和語法及API,還有CSS3的新的選擇器,效果和特性。最 後,
還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章,你就能用HTML5和CSS3開發一個自己的網站啦。

DESIGNING A BLOG WITH HTML5(用HTML5設計部落格)

許多HTML5 特性要結合JavaScript
API一起使用,以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些,我們來看怎樣建立一個部落格。

DESIGNING FOR THE FUTURE WITH HTML5 AND CSS3 :
TUTORIALS AND BEST PRACTICES(為未來設計:HTML 5 和 CSS3 指南與最佳案例)

這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。

DESIGN AND CODE A COOL IPHONE APP WEBSITE IN
HTML5(用HTML5設計和實現一個超酷 IPHONE APP 網站)


HAVE A FIELD DAY WITH HTML5 FORMS(建立HTML 5表格)

這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

HOW TO CREATE A NICE BLOG DESIGN TOUCHING THE
FUTURE(不用PHOTOSHOP,完成網頁設計)


HOW TO MAKE ALL BROWSERS RENDER HTML5 MARK-UP
CORRECTLY – EVEN IE6(怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6)

這篇文章將教你如何用JavaScript和CSS,使 HTML5頁面向下相容,即使是IE6也不例外。

HOW TO MAKE AN HTML5 IPHONE APP(製作HTML5 IPHONE
應用)

這是 一篇針對iPhone的指導,但是許多技術也可用在相容HTML5的手機瀏覽器上。

HTML 5 AND CSS 3: THE TECHNIQUES YOU』LL SOON BE
USING(HTML 5 和CSS 3:你將用到的技術)

這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS,將很容易跟上。

HTML5 FOR BEGINNERS. USE IT NOW, ITS EASY!(HTML
5初學指南)

給所有具有基礎HTML知識的初學者的HTML 5 入門指南

HTML5
PRESENTATION

這篇文章介紹了HTML5 的發展歷史和它的基本特性

HTML5 TUTORIAL – GETTING STARTED(HTML 5 入門指導)


HOW TO BUILD WEB PAGES WITH HTML 5(怎樣建立HTML
5網頁)


SIMPLE WEBSITE LAYOUT TUTORIAL USING HTML 5 AND
CSS 3(HTML5和CSS3佈局指南)

HTML5最令人期待的新標籤包括HTML5最令人期待的新標籤包括header, footer, aside,
nav,audio,同時它還包括畫圖,線下存儲資料,拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML 5
佈局頁面,用CSS3 設定樣式。最終結果如下

STRUCTURAL TAGS IN HTML5(HTML 5 結構標籤)

HTML5 有許多標籤幫助網頁結構化,這能省去以網頁中許多div

HTML5 BOILERPLATES(HTML 5樣板)

此文介紹了一些你能拿來就用的HTML5 樣板檔案

HTML 5 CANVAS – THE BASICS(HTML 5 基礎——CANVAS)

對HTML 5 Canvas使用方法的全面指導

HTML 5 TUTORIALS(HTML 5 指南)


IMPLEMENTING HTML5 DRAG AND DROP: NEW PREMIUM
TUTORIAL(HTML 5 拖放)

HTML5 的一個新特性就是拖放,不過IE早在5.5時代就支援拖放了,而HTML 5
的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

PREVIEW OF HTML 5

這是一篇比較老的文章,介紹了HTML5的特性和優點。

THE HTML 5 CANVAS FOR FLASH DEVELOPERS :
DRAWING(HTML 5 CANVAS 的畫圖功能)


THE POWER OF HTML 5 AND CSS 3

介紹了HTML 5 與CSS3能創造的各種效果。

VIEW SOURCE TUTORIAL: STICKY NOTES WITH HTML5 AND
CSS3(HTML5 和CSS3 打造便利貼效果)


WEBOS HTML5 DATABASE STORAGE TUTORIAL(WEBOS HTML5
資料存儲指南)

HTML5 的本機存儲功能將使資料存儲十分簡便。

YES, YOU CAN USE HTML 5 TODAY!

本文介紹了一些現已被支援的HTML 5 特性,對初學者十分有用。

imXD5 以HTML5為架構的WordPress佈景主題

又到了換佈景的季節了,這回突然心血來潮想要挑戰一下HTML5的架構。雖說這個架構要到2022年才會完全落實,不過現在開始動其實也不嫌早,畢竟這是未來的趨勢,使用語意標籤去架構整個網站,未來維護也會比較方便,新標籤也多了一些額外功能,對於搜尋引擎來講,似乎有一些小小的加分(?),在這樣的迷思下,不小心就把網站給改好了。
像是上一版的imXD只有一張RSS圖感覺非常單調,所以這次加了許多的小圖案(雖然也不是很明顯..)來點綴一下網站。不過主要的變化還是對整體的網站架構有了新的變動,也把許多功能function化,讓佈景主題程式碼乾淨一點,只是functions.php倒是增肥了不少,至於CSS也用了一些CSS3的語法來達到一些小小的特效。
本來這篇文章是想要先打完之後,再跟著佈景一同現身,不過因為想說都調整這麼久了,總有一股衝動想要直接給他啟用,所以在昨天晚上半夜12點多,趁著網站人數不多的時候,默默地上架了。一上架就發現許多小問題,因為本機電腦環境和實際運作環境的東西有差,所以修正這一些小問題又花了不少的時間。會出問題的主要是在側邊欄模組,因為我本機電腦環境和網站上落差蠻大的Orz。

版面寬度990

就從版面框框先講起,如果大家有注意到,這次的版面「好像」比較寬一點?沒錯!因為版面的寬度從原本的960調整到990,想說現在的螢幕都逐漸走向寬螢幕1024×768的解析度使用者應該越來越少,所以就偷偷調整了。雖然我每次都跟人家講說網頁寬度請保持在960px~980px之間,不過考慮到一些狀況,所以這次就真的給他改下去了,因為有好幾次都想說將舊版改寬,但中間都遇到很多突發狀況。
這回的版面除了調寬之外,側邊欄也縮小,上一版的imXD則是將側邊欄放寬到快300px,這回側邊欄僅有250px而已,這樣改主要是想讓內容寬度可以更寬一些,因為內容區域是網站的一個主體,如果小小窄窄的,閱讀起來不太舒服、也會感受到一些小小的壓力。以前曾經換成三欄式,結果一個月就下架了。後來接手的就是目前新佈景imXD5架構的雛型了…(就是傳說中的inove佈景,相信大家都不陌生。)
imXD5 以HTML5為架構的WordPress佈景主題
〈▲以HTML5+CSS3為架構:imXD5。〉

HTML5的語意架構

前一版不是叫做imXD,這版怎麼會突然跳成imXD5呢?因為這次的版面使用HTML5的架構去寫的主題,如同前面提到,HTML5是目前最新的網頁架構,強調「語意」標籤,用這個架構主要是為了搜尋引擎最優化,因為HTML5語意的關係,對於搜尋引擎來講等於說是直接告訴他網頁哪個地方權重較高,直接把重點給搜尋引擎,另外網頁程式碼也會比HTML4更好解讀。目前WordPress的預設佈景twentyeleven就是使用HTML5的架構,你發現了嗎?
imXD5 以HTML5為架構的WordPress佈景主題
〈▲HTML5特色:語意標籤。〉

內文側邊社群分享按鈕

目前還算是社群服務還是很夯的時代,所以不得不把社群分享按鈕弄得明顯一點。如果螢幕寬度夠寬的畫,相信會在內文頁面的左方看到一排分享按鈕。有Google+1Facebook以及Twitter的分享按鈕。這樣的做法是上次在硬是要學的網站上看到,感覺不錯就學回來了(國外網站也蠻多這樣做的)。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲看到這邊,別忘了看看左邊,順手按個讚!〉

網頁上方社群分享按鈕

以往,香腸炒魷魚的網站右上角都空空的(因為沒有人買廣告阿~笑),本來想要把搜尋放到那邊去,但總覺得怪怪的,剛好想起免費資源網路社群網站右上角是放社群分享按鈕,再加Google+1說他們會影響到一些搜尋權重(個人化搜尋),如法炮製的把按鈕搬到右上角了,只是放三個按鈕還是覺得很少,又加上這一陣子的RSS訂閱數都沒有衝高,所以又擺了個RSS圖示上去,希望以起大家的注意。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲如果你還沒按讚、推、+1的人,別忘了幫我們按一下唷!〉

側邊社群追蹤數字

放一個Facebook粉絲框剛剛好,如果再放上一個Plurk框Google+框,感覺整排側邊欄就太長了,而且越下面大家越容易沒看到,又加上自己想要看到統計的數字,所以找了一些資料就把功能實做出來了,至於怎麼做,相信大家Google一下國外網站,可以找到不少資料(不過有些寫法比較舊,要自己改寫一下)。在處理的過程中,唯獨噗浪不知道怎麼弄API,所以就直接擺上文字了Orz…。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲歡迎訂閱、追蹤我們!〉

網頁自適應性CSS3 Media Queries

最近mrmu也將自己網站改成HTML5的架構,其中布景也使用了一些CSS3的效果,如果大家有注意到他的網站,最明顯的就是使用CSS3網頁自適應性(CSS3 Media Queries),因此香腸就把這個做法移到內文區的分享按鈕,解決在瀏覽器寬度太窄的況下,還是會有按鈕顯示。或許大家有個小疑問,為什麼要這麼麻煩?因為內文區擺太脫按鈕改覺很雜,所以才用這樣的方法來處理。(但IE8以下,就全露餡了)
imXD5 以HTML5為架構的WordPress佈景主題
〈▲網頁自適應性可,以讓使用者更好的體驗。〉

隨機分類推薦閱讀

這功能應該是這次花蠻多時間在處理的部分,因為這邊的作法是隨機選取五個分類然後再根據這五個分類去隨機選取五篇文章,並顯示標題、圖片與超連結。並且搭配JQuery的Tab來達成效果,簡單說應該是仿Yahoo首頁新聞的作法。因為我同學Mavis想要在文章內使用這功能,所以我就先拿自己網站開刀測試看看了,如果OK到時候再幫他裝上,她主要是Photoshop教學網站,使用這種方式推薦閱讀,會更有看頭。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲圖像的推薦閱讀,可以更吸引訪客。〉

網站導航麵包屑(Breadcrumb)

以前曾經在Sofreev1.1LowYA內加入過這樣的導航功能,但後來我也不知道為什麼拿掉了?或許是因為感覺放在那邊跟標題卡在一起感覺很怪吧?這回心血來潮又將按鈕放回去了,並且將顏色調淡、標題有多一些間距,感覺不會搶走標題的風采。補充一下,這個功能正確的名稱是麵包屑(Breadcrumb),對於搜尋引擎或是訪客,都是一個很好的東西,可以清楚地告知訪客目前位置。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲看到哪邊,都不會迷失方向。〉

HTML5留言表單

既然網頁整體架構使用HTML5去構版,那麼就不得不用一下HTML5的標籤了,雖然WordPress本身有提醒機制,不過使用HTML5的方式去做,感覺可以潮一點。目前暫時找不到針對其他非Google Chrome的瀏覽器,美化這個提示框Orz…
imXD5 以HTML5為架構的WordPress佈景主題
〈▲減少系統驗證,省去資源耗用。〉

新版404錯誤頁面

一個網站對於404頁面的設計其實是最容易忽略的,大多數的人可能認為不重要,但是當訪客近來你的網站,如果找不到想要的資訊就會跳出,那麼我們該如何好號把握這個訪客呢?倘若訪客找不到相關資訊,肯定是關掉瀏覽器走人,這時候我們可以自訂一下404頁面,留下一些可能會吸引訪客的資訊。這回在404頁面上的設計,跳脫了之前的框框,改用虛線底線來牌版,並且顯示各分類的文章,另外下方也顯示一些文章彙整,香腸自己也可以檢視一下每個月寫了多少文章(笑)。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲留住訪客最有效的方式。〉

佈景自訂選項

最後,來看一下佈景後台設置。其實最近這幾個面板,都有加入佈景後台的設計,因為這樣的功能真的很方便,不需要改程式,就可以直接將功能加到主題中了,而且如果把佈景給朋友,他們也可以輕鬆加入自己想要的東西。後台的欄位主要就是整合META優化、廣告欄位以及Facebook留言整合。比起上一版的imXD少掉許多東西,因為目前佈景沒有要釋出,所以功能就不必做太多了。(因為上一版imXD有給幾個同主機的朋友使用:卡咪龜殺氣小俊,所以功能較多XD)
imXD5 以HTML5為架構的WordPress佈景主題
〈▲第一次秀後台(blush)。〉

function 功能模組化

這次大多數的功能都盡量做成模組,對於程式設計師來講,一開始會比較難做,因為要考慮到傳值的問題,或者是global變數的使用,但是功能一但做到後,未來如果要改佈景,就使用function即可輕鬆轉移。如果要自訂function的話,就要善用佈景主題的functions.php,即可達到自己所需的效果。
imXD5 以HTML5為架構的WordPress佈景主題
〈▲functions.php檔案變大了〉

IE的一些小問題&總結

這次調整佈景主題只針對IE9、IE8、IE7、Firefox7Chrome14做校正,其他瀏覽器我就沒辦法支援了。針對目前這些瀏覽器做校正,絕對是可以涵蓋90%以上的使用者,剩下的使用者就請你們轉換一下了。至於蘋果的Safari我也沒去校正,因為Chrome和他同核心,所以網頁樣式不會相差太大的。那IE6呢?我已經把他丟到路邊的垃圾桶了。這回來開IETester都懶…(因為IE9的相容模式可以向下相容到IE7)
IE7其實也不太想調整了,因為她是跟著失敗的作業系統一同現身的,不過還是有很多人使用,所以只好默默地支援了。在改版的過程中遇到了關於IE7的問題,常見的是Google +1按鈕在IE7無法出現,因此版面配置上為了避免排版不好看,Google+1按鈕一定要放在最前面或最後面,不然放中間到時候會變成一個空洞。在IE8的狀況下,Google連結組廣告會被遮蓋(這應該是Google本身的問題)。
整體來講,很多東西都是由前一版imXD來改的,因為目前香腸自己對於這樣的版面算是很滿意,那麼另外一位站長魷魚絲呢?他好像一年沒發文了?(聽說他最近很忙,香腸也很少看見他上線)。既然香腸說OK,魷魚絲應該也OK啦(笑)。目前可能還有一些小Bug,如果大家有發現,別忘了回報一下唷!
這個新版,希望大家會喜歡 😀

2015年6月26日 星期五

Bootstrap 超好用工具 – Start Bootstrap 免費版型&資源網站


初期使用bootstrap的人可能會很苦手不知要怎麼下手版型,Google關鍵字「Bootstrap Theme」其實可以找到許多資源網站,一般免費的Theme 網站大都也是提供基礎的配色跟樣式,但那對初學者來說已經很夠用。目前看過最喜歡也最實用的是 Start Bootstrap 這個網站,不但有基本分類而且也有提供Unstyle的版型,基本Layout都排好了,比如Single Page、Portfolios、Ecommerce….等,且沒有太多花俏的樣式增加修改的難度;另外此網站還蒐集並整理了其他網路上Bootstrap的資源,有官方資源、免費版型樣式、付費版型樣式、範例網站、jQuery外掛…等等,非常詳盡且方便。
主選單上有幾種分類可以選:
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型
startBS_3

Full Websites – 整個網站的雛形都有了
startBS_4

Unstyled Templates – 有各式Layout可以選擇,都是基本沒有添加樣式的版型
startBS_6

One Page Websites – 一頁式類型,除了有幾組有完整的theme以外,其他也有基本unstyle的版型
startBS_7
另外到 Buy Bootstrap Templates也可以看到各種付費版型的列表頁面,這些作品都會直接連結到幾個常見的付費版型網頁
startBS_8

比如Wrap Bootstrap,但其實綜合看下來在這裡出現的付費版型也都幾塊~十幾塊美金而已,說真的不貴,換算台幣也不過兩百多到四百多塊左右,而且有些基本架構或動態都已經很完整,事實上買來使用在專案上也很划算。
startBS_9

另一個前面提過這個網站很棒的地方就是資源蒐集的部份,點選Bootstrap Resources List
startBS_12

左邊分類選單
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具,比如 UI Bootstrap 中優化及改善基本功能;Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具,比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛
startBS_10

除了分享簡介功能以外,也直接提供了連結網址,非常實用,下次再來介紹其他免費資源~
startBS_11

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

2015年4月6日 星期一

[HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

資料來源

今天看了一下HTML5之前一直強調的功能,就是在Client端可以暫存更多的資訊,其實在Client端暫存資料並不是什麼新鮮事,Cookie就可以做到了,但Cookie在使用上有幾個不便利的地方:
  • Cookie在每個HTTP request送出時都會被送到Server端,不管你沒有要用到Cookie中的資訊,在某種程度上會拖慢執行的效能與浪費不必要的網路頻寬
  • Cookie送出的資料本身並沒有加密,因此除非我們用SSL一類的技術做加密,否則Cookie中不宜放任何重要的資訊
  • Cookies最大才4KB,不可能存太多資料

如果我們今天希望有更大的空間、更安全的保存、更少的頻寬浪費,在Client端找個地方暫存我們想暫存的數據似乎就變得非常重要了,在HTML5的Storage技術推出前其實已經有一些技術逐步在實現這樣的目標(包含透過Flash或Sliverlight),但到了HTML5才算是統一標準並集大成,目前支援HTML5 Storage的瀏覽器及版本如下:
image
原則上比較知名的瀏覽器在現行的版本中大多支援,連手機上的瀏覽器也漸漸的支援HTML5 Storage了,這對開發人員來說算是很好的一個消息。

HTML5的Storage主要分為兩種:localStoragesessionStorage,這兩者主要在生命週期上有較明顯的差別,localStorage的生命週期較長,原則上要等到透過Javascript將內容清掉或者使用者清空Cache時才會消失;而sessionStorage則是在Browser/Tab關閉時就會清空,下面先來看一個簡單的範例:

我先在畫面上拉兩個欄位:
image

當我按下Save時會將TextBox中的文字分別寫到locaoStorage跟sessionStorage中,並寫了一個讀取Storage的function:

1function loadStorage() {
2    document.getElementById("local").value = window.localStorage["local"];
3    document.getElementById("session").value = window.sessionStorage["session"];
4}
5 
6function saveToStorage() {
7    window.localStorage["local"] = document.getElementById("local").value;
8    window.sessionStorage["session"] = document.getElementById("session").value;
9}
然後我在兩個欄位分別輸入local跟session的文字,按下『Save』後會refresh畫面,並在body onload事件中會觸發localStorage的事件: 
image

我們可以發現網頁上的值確實被保存下來了,如果這時候我按下『OpenWin』的按鈕,透過showModalDialog的方式開啟另一個視窗,會發現兩個視窗的值相同,這邊先初步證明了localStorage/sessionStorage的值是被保存下來的: 
image

接著來求證一下sessionStorage的值只會保存在單一Tab中,我們用相同的網址開啟HTML5Storage這個頁面,我們可以發現localStorage的值仍然在,但sessionStorage的值已經消失了,而localStorage則在關閉瀏覽器再開啟時還是可以看的到,透過這樣簡單的範例大致上求證了一下兩者生命週期的差異,我測試過IE9、Chrome11、FF3.6: 

image 
image

適度地透過Browser的Storage可以加快網頁的載入速度也可提高用戶的使用體驗。

參考資料: 

Dive Into HTML5

Introduction to DOM Storage
HTML5 Web Storage, Using localStorage and sessionStorage Objects


關連文章



    回應


    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    看起來是解決了client端存資料的問題~有沒有缺點呢?
    2011/3/28 上午 09:31 | jain 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    to jain :
    目前我覺得跟Cookie相似度極高,但可以存的內容較豐富,硬要說有什麼缺點,有人說是安全性,不過安全性的問題跟系統如何設計有關,我覺得稱不上他的缺點....

    2011/3/28 下午 10:30 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    gipi 你好,
    我把http://www.w3school.com.cn/tiy/t.asp?f=html5_webstorage_local_pagecount 這個範例copy到我的伺服器上時,在ie 下無法正常執行,但在w3c 的範例上又可以正常,請問這差別在哪裡? 謝謝。
    2014/8/19 上午 11:17 |  回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    你說靶範例copy到你的伺服器上,然後在IE執行是不行的,但同樣的code,你在w3c的網站上執行是ok的,在這過程,你用的都是IE嗎?

    如果你用了不同的瀏覽器,那你可以確認一下你的IE版本,並非所有的版本都支援此特性。
    Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
    Note: Internet Explorer 7 and earlier versions, do not support Web Storage.
    2014/8/19 下午 04:43 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    是的,我是用 IE 10 來測試的,但剛才我把 localStorage 換成 sessionStorage 時,是可以正常執行的。
    2014/8/19 下午 05:22 |  回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    to 林 :
    貼一下你的程式碼可能快一些。
    2014/8/20 下午 09:42 | gipi 回覆

    # re: [HTML5]簡述HTML5的Client端暫存-localStorage/sessionStorage

    gipi 大,以下是我的程式碼,在 Chrome 下執行正常,但在 IE10 執行時不會運作。

    01
    02<html>
    03<body>
    04 
    05<script type="text/javascript">
    06 
    07if (localStorage.pagecount)
    08    {
    09    localStorage.pagecount=Number(localStorage.pagecount) +1;
    10    }
    11else
    12    {
    13    localStorage.pagecount=1;
    14    }
    15document.write("Visits: " + localStorage.pagecount + " time(s).");
    16 
    17</script>
    18 
    19<p>刷新頁面會看到計數器在增長。</p>
    20 
    21<p>請關閉瀏覽器窗口,然後再試一次,計數器會繼續計數。</p>
    22 
    23</body>
    24</html>