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

歡迎來信指教