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();
    });
}