jQuery寫緩存之：sessionStorage的運用，配合PHP將不同tab頁的數據寫入后台

JS（jQuery）寫緩存之：sessionStorage的運用：

結果就是講存儲的DOM對象value傳到后台PHP，進行foreach(){} 解析JSON成二維數組

示例頁面：http://www.xxxx.com/index.php?ctl=project&act=add_content&id=63

圖片：  

 

              上1和下2

   

 

 

 /*我的自述 我的項目 為何眾籌 + 自定義章節 */

/*我的自述     我的項目     為何眾籌   + 自定義章節 */
$(function(){
    $('ul#tab li').bind("mousedown",function(){
        /*點擊疊加樣式*/
        $(this).addClass('active').siblings().removeClass('active');
    });
    js_session_mouseup();
    //點擊this自定義章節，siblings()上下排序、刪除div自動隱藏
    click_custom_hide();
    
    $("ul#tab li").bind("mousedown",function(){
        var index3 = $(this).index();
        if(index3 >= 3){
            $(this).addClass("active").siblings().removeClass("active");    //加樣式
            $("#kw").removeAttr("readonly");
//            //給#kw初始化賦值
//            var val = $(this).text();
//            //alert(val+"id=63");
//            $("#kw").val(val);
            //動態給<a>賦值
            $("#kw").bind("keyup",function(){
                var kw = $("#kw").val();
                $("li[class='active']").find("a").text(kw);
            });
        }else if(index3 <=2 && index3 >=0){
            $("#kw").attr("readonly",true);
        }
    });
    
    
    var i=0;
    $('#addTable').bind('mouseup',function(){
        ++i;
       //alert(i);
        var count = $('ul#tab li').length;
        //alert(count);
    //所有章節最多只允許存在5個，通過i判斷 xzz0505
        if(count >= 5){
            $.showErr("抱歉，自定義章節最多只允許添加2個");
            return false;
        }
        $("#tab").append("<li><a>自定義章節</a><div class='changeIndex'> <div class='transform up'> <span class='icon icon-kaistart-arrows-left'></span> </div> <div class='transform down'> <span class='icon icon-kaistart-arrows-left'></span> </div> </div> <span class='icon icon-kaistart-close'></span></li>");
        
        $("ul#tab li").bind("mousedown",function(){
            var index2 = $(this).index();
            if(index2 >= 3){
                $(this).addClass("active").siblings().removeClass("active");    //加樣式
                $("#kw").removeAttr("readonly");
//                //給#kw初始化賦值
//                var val = $(this).text();
//                //alert(val+"id=63");
//                $("#kw").val(val);
                //動態給<a>賦值
                $("#kw").bind("keyup",function(){
                    var kw = $("#kw").val();
                    $("li[class='active']").find("a").text(kw);
                });
            }else if(index2 <=2 && index2 >=0){
                $("#kw").attr("readonly",true);
            }
        });
        js_session_mouseup();
      //點擊this自定義章節，siblings()上下排序、刪除div自動隱藏
        click_custom_hide();
        
        /*點擊‘x’自定義章節刪除*/
        $(document).on('click', '.icon-kaistart-close', function() {
            if(!window.sessionStorage){
                return false;
            }else{
                var del_key = $.trim($(this).parent().find("a").text())+$("input[name='id']").val().toString();
                var storage = window.sessionStorage;
                storage.removeItem("del_key");
            }
            $(this).parent().remove();
            //--i;
        });
    });
});

function js_session_mouseup(){
    if(!window.sessionStorage){
        return false;
    }else{
        $("ul#tab li").bind("mouseup",function(){
            var index = $(this).index();
            var my_block = $.trim($("input[name='my_block']").val());
            var my_title = $.trim($("input[name='my_title']").val());
            var descript = $(".editable").html();
            var textarea = $.trim($("textarea[name='descript']").val()); 
            //表單章節名+項目id
            var block_key = my_block+$("input[name='id']").val().toString();
            //點擊的左側章節名+項目id
            var click_key = $.trim($(this).find("a").text())+$("input[name='id']").val().toString();
            //將<form>表單存儲為json對象，以‘章節名+項目id’為key，三個字段值為value；
            var json_data = {"my_block":my_block,"my_title":my_title,"descript":descript,"textarea":textarea};
            
            //賦值。sessionStorage相同key自動替換；key不同：添加元素 //這里需要處理異常，sessionStorage最大限額為5M，所以最好做一個判斷 try{ sessionStorage.setItem(block_key,JSON.stringify(json_data)); }catch(Exception){ console.log('超出本地存儲限額！'); alert("您填寫的內容已超過本地存儲限額5M"); return false; } //取值,將sessionStorage數據寫入隱藏域數組arr
            var storage = window.sessionStorage;
            var arr=new Array();
        /* 將sessionStorage數據全部寫入隱藏域，以數組的形式放在<form>表單里面 */
            for(var j=0,len=storage.length;j<len;j++){
                var key1 = storage.key(j);
                arr.push(sessionStorage.getItem(key1));
            }
        //    console.log(arr);    //數組對象
            var str_arr = JSON.stringify(arr);     //數組轉json對象
            var str = JSON.stringify(str_arr);         //json對象轉json字符串
        //    console.log("json字符串："+str);             
            $("input[name='sessionStorage']").attr("value",str_arr);
            var v = $("input[name='sessionStorage']").attr("value");
        //    console.log("sessionStorage隱藏域值："+v);    //json字符串
            
            for(var i=0,len = storage.length;i<len;i++){
                var key = storage.key(i);    
            /*遍歷到了點擊的click_key，取值*/
                if(key == click_key){
                    /*console.log("章節名相同數據展示");*/
                    var back_data = JSON.parse(sessionStorage.getItem(click_key));
                    $("input[name='my_block']").val(back_data.my_block);
                    $("input[name='my_title']").val(back_data.my_title);
                    $("textarea[name='descript']").val(back_data.textarea);
                    $(".editable").html(back_data.descript);
                    return false;
                }
            }
            
                /*console.log("章節名不同為空");*/
                $("input[name='my_block']").val($.trim($(this).find("a").text()));
                $("input[name='my_title']").val("");
                $("textarea[name='descript']").val("");
                $(".editable").html("");
                return false;
        });
    }
}

//點擊this自定義章節，siblings()上下排序、刪除div自動隱藏
function click_custom_hide(){
    $("ul#tab li").bind("click",function(){
        $(this).find("div").show();
        $(this).find("span").show();
        $(this).siblings().find("div").hide();
        $(this).siblings().find("span").hide();
    });
}