Html5 Storage

在HTML5的規格內，加入了一項新的東西，就是Storage
http://www.w3schools.com/Html/html5_webstorage.asp
如w3school的說明～ 比cookie好～就是打算來取代cookie的部分功能～

用法上已經改得相當簡單，把他想成是map。
只要setItem('test', 'tttt')，getItem('test')，clear()...
就已經可以滿足很多的使用情境～

另外有localStorage，與sessionStorage的 內容值存取範圍差別，
在測試底下，sessionStorage，就大概是指用同一個頁面access的範圍
（開啟新分頁，或是瀏覽器重開就會不見）
而localStorage則是在同一瀏覽器上都可以運作，但是無法跨瀏覽器。
若要跨瀏覽器還是只能靠Server端儲存～

更詳盡的說明可以參考
http://apress.jensimmons.com/v5/pro-html5-programming/ch11.html

不過在打算使用這功能時，在規劃時要注意的是，到底能存多少資料在裡面？
查了一些網路文章，結論就是看各家瀏覽器的實作...而瀏覽器目前最少的應該是5M...
（應該會隨著時代而慢慢增加吧～如果網頁應用發展的好的話～～）
相較之下，原本的cookie 大概在4k左右，加上有分scope，在應用上會比較安全點，怎麼說Storage應該都是比較好的選擇～



貼一下簡單的測試程式
var supportStorage = false;
function checkStorageSupport() {
  //sessionStorage
  if (window.sessionStorage) {
    //alert('This browser supports sessionStorage');
    $('#show_session').html(sessionStorage.getItem('test'));
  } else {
    //alert('This browser does NOT support sessionStorage');
  }
  //localStorage
  if (window.localStorage) {
    //alert('This browser supports localStorage');
    supportStorage = true;
    $('#show_local').html(localStorage.getItem('test'));
  } else {
    //alert('This browser does NOT support localStorage');
  }
}

function saveIconList()  {
    if(!supportStorage)  {
        return;
    }

    var h1 = $('#myinput').html();
    localStorage.setItem('test', h1);
    sessionStorage.setItem('test', h1);
}