Monday, September 27, 2010

HTML5 Web Storage 購物車

HTML5 前陣子非常紅,除了一堆新的 Tag 之外,跟他搭配的好兄弟 JavaScript 對應的 API 也如雨後春筍般,充斥每個 geeker 的 blog。因此 HTML5 相關的介紹可以參考這個網頁效果,這裡略過。



Web Storage

這機制是瀏覽器有內建一些空間用來儲存字串,為一組 key-value 對應的組合。以前寫網頁如果想存取變數或是存放資料會選擇 cookie 或是 session 的方法來做處理,現在可以用瀏覽器內建的 Web Storage 來做處理即可。


1. 存取方法

var key = 'counter';
var counter = localStorage.getItem(key);
if (counter == null) {
    counter = 0;
} else {
    counter = parseInt(counter) + 1;
}
localStroage.setItem(key, counter);

var counter = localStorage.counter;
if (counter === undefined) {
    counter = 0;
} else {
    counter = parseInt(counter) + 1;
}
localStroage.counter = counter;
  • getItem(key) 或是 removeItem(key) 就能處理完畢
  • 注意取值的資料型態是 undefined 或是 null
2. 如何開啟圖片所述的畫面?

Google Chrome 瀏覽器: [ 設定 ] > [ 工具 ] > [ 開發人員工具 ],選擇  [ Storage ] 項目就會出現。


購物車實做

看到 Google Chrome 瀏覽器開發人員工具的 Storage 樣子還蠻像資料庫的感覺,再加上  Web Storage 能夠存放的空間除了大之外,取值完全在 Client 端完成,勢必可以提升速度的,所以以購物車當作練習。

1. 資料保存方式

首先要了能夠區分 localStorage 和 sessionStorage,這是端看購物車需要哪一種效果時會考量到的地方。localStorage 的存放是與永久存在於瀏覽器中,除非刻意清除,否則會持續保留;而 sessionStroage 儘會存在於該分頁之內,當你離開此分頁就會消失。
  • 使用者不小心離開系統,若購物車使用 sessionStroage ,則資訊仍存在。
  • 使用者不小心關閉系統,若購物車使用 localStorage,則資訊仍存在。

2. JavaScript Source Code (BuyCar.js)

BuyCar = function(){
 this.stack = [];
 this.priv = "BC_"; // 資料庫標頭
 this.setStack = function(input){
  window.sessionStorage.setItem("BC_" + this.stack.length.toString(), input);
  this.stack.push(input);
 }
 this.getStack = function(){
  return this.stack;
 }  
 this.initStack = function(){
  for(i = 0; i < window.sessionStorage.length; i++){
   var wsValue = window.sessionStorage.key(i);
   if(wsValue.substr(0, this.priv.length) == this.priv){
    this.stack.push(window.sessionStorage[wsValue]);
   }
  }
 }
 this.finishStack = function(){
  var number = 0;
  do{
   number = this.recursive(number);
  }while(number != this.stack.length - 1);
  this.stack = null;
 }
 this.recursive = function(number){
  for(var i = 0; i < window.sessionStorage.length; i++){
   var wsValue = window.sessionStorage.key(i);
   if(wsValue.substr(0, this.priv.length) == this.priv){     
    window.sessionStorage.removeItem(wsValue);
    return number + 1; 
   }
  }
 }  
 this.sentStack = function(){
  //sent ajax request to process.php
 }
}
  • setStack: 將訂單資料丟入BuyCar
  • getStack: 取得 BuyCar 所有暫存的訂單
  • initStack: 初始化 BuyCar,會將 Storage 中有的訂單 restore 處理
  • finishStack: 傳送完畢後,將  Storage 的訂單清料清空
  • recursive: 因為 Storage 每刪除資訊會更換 index,因此利用遞迴處理
  • sentStack: 將訂單發送到後端程式,例如傳 AJAX 通知 PHP 寫進資料庫。
主要流程和概念,雖然 Web Storage 與 Cookie  都有 Domain 都限制,但是仍然會有機會不小心被存取到或是刪除,因此加入類似資料庫標頭的名稱來區別同一個 Domain 的不同服務。且因為 Web Stroage 特性(類似 Java 中的 Table),刪除第一筆資料後,第二筆到第N筆會補上,也就是 index 也更新。再加上怕誤刪相同網域的服務資訊,因此採用上述的方式去做刪除的動作。發送的函式,實作上應該要加入特定的 AJAX 請求,我目前是採用 AJAX 跟 PHP 做 POST 通訊,且將訂單資料以 JSON 形式傳給 PHP,再以 json_decode() 解析 Object 寫入購物車實際採用的後端 MYSQL 資料庫或是其他資料儲存空間。  

3. 購物車安全與否

可以參考 Web Storage API: More Security, Efficiency and Capacity than Cookies 文章,在存取方面的快速和方便性足以讓我們轉用  Web Storage,但是需要帳號密碼的登入資訊仍然需要  session 和  cookie 做搭配處理。但是除此之外,仍然有許多應用可以把 Web Storage 套上去。

延伸閱讀

[1.] WebStorage API  簡介
[2.] Web Storage API: More Security, Efficiency and Capacity than Cookies


歡迎來信指教

No comments:

Post a Comment