zoukankan      html  css  js  c++  java
  • 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();
        });
    }
  • 相关阅读:
    【crontab】误删crontab及其恢复
    New Concept English there (7)
    New Concept English there (6)
    New Concept English there (5)
    New Concept English there (4)
    New Concept English there (3)
    New Concept English there (2)Typing speed exercise
    New Concept English there (1)Typing speed exercise
    New Concept English Two 34 game over
    New Concept English Two 33 94
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/6845067.html
Copyright © 2011-2022 走看看