好了，今天有事嶄新的一天啊，經過前面幾個課程的學習，我想大伙應該差不多已經可以寫一些Html5的應用了，Canvas 的用途太多了，我以後和大家慢慢的談論，呵呵
弄不好，開個專題，也可以。(*^__^*) 嘻嘻……。好了開始我們今天的課程吧。
大家都應該知道 CookIEs 這個東東哦，但是太郁悶了，他只有 4K ？ 真的啊，呵呵，要是工資底薪還可以。。哈哈
這節課，俺說的這個和COOKIES 差不多。好了，廢話不多說，我們講課。
Html5 提供了兩種在客戶端存儲數據的新方法：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookIE 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookIE 速度很慢而且效率也不高。
localStorage
目前 Chrome,Firefox,Opera,safari, IE8 都支持此屬性。還有一個很重要的一點，就是
各個浏覽器分配給每個 localStorage 空間至少為 5M（具體數值請看稍後討論），對於想開始使用 Html5 的人們來說，這個是個不錯的開始。哈哈，5M >>>> 4k 啊
我們先來一個測試，驗證浏覽器是否支持 localStorage
XML/Html Code復制內容到剪貼板- <! doctype Html>
- <Html>
- <head>
- <script type="text/Javascript">
- function check() {
- if (window.localStorage) {
- alert("浏覽器支持 localStorage");
- }
- else {
- alert("浏覽器不支持 localStorage");
- }
- }
- </script>
- </head>
- <body>
- <canvas id="mycanvas" width="200" height="200">不支持此標簽 KingDZ原創 http://www.cnblogs.com/hihell </canvas>
- <input type="button" value="驗證" onclick="check();" />
- <body>
- </Html>
效果圖---谷歌測試結果。
localStorage 使用方式非常簡單
有 setItem, getItem, removeItem,key, clear 5個方法，和 length 一個屬性。
好了，下面我們開始嘗試一下吧。
localStorage 中都是以 key/value 的形式來存儲數據的，存儲的數據類型都是字符串。
如果需要其他類型，需要自行轉換。我們可以使用 setItem 方法來存儲數據。
也就是 localStorage.setItem(key,value);
JavaScript Code復制內容到剪貼板- <script type="text/Javascript">
- function check() {
- if (window.localStorage) {
- try {
- localStorage.setItem("name", "祖國你好!");
- }
- catch (e) {
- alert(e);
- }
- }
- else {
- alert("浏覽器不支持 localStorage");
- }
- alert(localStorage.getItem("name"));
- }
- </script>
上面的這個例子就包括了我們常見的兩種用法。
下面我們在介紹幾個不同的用法，但是以上面的那兩個為主
localStorage.key = "value"; ---------------------設置key為"value"
localStorage["key"] = "value"; ------------------設置key為"value"
localStorage.setItem("key","value");----------------設置key為"value"
var value1 = localStorage["key"];-------------------獲取key的值
var value2 = localStorage.key;-------------------------獲取key的值
var value3 = localStorage.getItem("key"); ------------獲取b的值
上面的方法是等效的。不過建議大家用 setItem 和 getItem
localStorage.removeItem("key");--------------------清除key的值
如果希望一次性清除所有的鍵值對，可以使用clear();
localStorage.clear();
當然 localStorage有一個 key() 方法，我只在這裡提示一下，就是，不知道 key 是什麼了，只能用 循環 得到 也就是 localStorage.key(i) ------------其中 i 是下標。
好了下面是一個簡單的頁面 訪問計數器。
XML/Html Code復制內容到剪貼板- <head>
- <script type="text/Javascript">
- function check() {
- if (window.localStorage) {
- try {
- if (localStorage.pagecount) {
- localStorage.pagecount = Number(localStorage.pagecount) + 1;
- }
- else {
- localStorage.pagecount = 1;
- }
- document.write("第" + localStorage.pagecount + "次訪問");
- }
- catch (e) {
- alert(e);
- }
- }
- else {
- alert("浏覽器不支持 localStorage");
- }
- }
- </script>
- </head>
- <body onload="check();">
- <canvas id="mycanvas" width="200" height="200">不支持此標簽 KingDZ原創 http://www.cnblogs.com/hihell </canvas>
- <body>
好了 完成了，大家測試一下吧，當然有各種各樣的寫法的。
下面我們說一下 sessionStorage 的簡單用法
哈哈，其實廢話了 ，他們的用法相同，區別在文章開始，就說了，
再寫一個計數器 sessionStorage 版本的
JavaScript Code復制內容到剪貼板- <script type="text/Javascript">
- function check() {
- if (!sessionStorage.pageCounter)
- sessionStorage.setItem('pageCounter', 0);
- sessionStorage.setItem('pageCounter', parseInt(sessionStorage.pageCounter) + 1);
- document.write(sessionStorage.pageCounter);
- }
- </script>
好了，大家試一下啊，關閉浏覽器，打開看真相。
呵呵，前者，木有時間限制，後者浏覽器關閉，就結束了。所以記得及時清空前者啊。今天得課程結束喽。