DL部落

註: 本文範例是臨時兜出來的, 如有Bug 再麻煩告之, 日後有修正專案會同步更新本文章

HTML5 LocalStorage 是個很方便的技術, 可以把資料存在客戶端, 一個網站通常很多頁面都會用到, 在多人開發或者是臨時維護他人程式, 這時 Key 的名稱如果取不好很容易把其他的 key(等同value) 給蓋掉, 所以我會把該頁網址當成key, 此時又會碰到另一個問題, 如果我一頁要存很多資料時怎辦, 此時就會衍生出下面的做法來解決這樣的問題

步驟一.  先貼上這段 Obj
var LS = {
    createNew : function(pageKey) {
        var ls = {} ;

        // 通常 引入 pageKey = 網址( javascript: location.pathname )
        ls.key = pageKey;

        // get localStorage by key. if key is empty, auto getAll.
        ls.getStorage = function(key){
            var tmp = window.localStorage[pageKey] ;
            if( typeof(tmp) === 'undefined' ) {
                return 'getStorage - localStorage not fount.' ;
            } else {
                tmp = JSON.parse(tmp) ;
                if( !key ) {
                    return tmp ;
                } else if( typeof(tmp[key]) === 'undefined' ) {
                    return 'localStorage[key] not fount.' ;
                } else {
                    return tmp[key] ;
                }
            }
        };

        ls.setStorage = function(key, val) {
            var tmp = window.localStorage[pageKey] ;
            if( typeof(tmp) === 'undefined' ) {
                var tmpObj = {} ;
            } else {
                var tmpObj = JSON.parse(tmp) ;
            }

            tmpObj[key] = val ;
            window.localStorage[pageKey] = JSON.stringify(tmpObj);
        } ;
        return ls;
    }
} ;

步驟二.  貼上下列三行程式碼後重新整理網頁, 到步驟三
var ls = LS.createNew(location.pathname); //先產生 Obj 出來, 跟 new 很像, 帶入值使用 pathname
ls.setStorage('name', 'DL部落'); //設置 key 為 name, value 為 DL部落
//alert(ls.getStorage('name'));

步驟三. 
將步驟二的 第二行 is.ls.setStora... 前面加上註解 //
再將 第三行前面的註解拿掉, 如下
var ls = LS.createNew(location.pathname); //先產生 Obj 出來, 跟 new 很像, 帶入值使用 pathname
//ls.setStorage('name', 'DL部落'); //設置 key 為 name, value 為 DL部落
alert(ls.getStorage('name'));

步驟四.  重新整理網頁
此時就會看到一提示訊息出現

以上...