7.6-7.11

关于sessionStorage，localStorage，cookie总结

1.都会在客户端(浏览器)保存，有大小限制，同源限制；
2.cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器；
3.有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除；localStorage长期有效，直到用户删除；

4.浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M。

通过localStorage前端保存数据，对数据进行增删改查的功能：

function clearinfo(){
        localStorage.student=
        "[{id:1,name:‘斯柯达‘,age:18,sex:‘男‘},{id:2,name:‘巴博萨‘,age:45,sex:‘男‘},"+
        "{id:3,name:‘郭书瑶‘,age:33,sex:‘女‘},{id:4,name:‘宋大官‘,age:27,sex:‘男‘}]"
    }
    show();
    function show(){
        var data=localStorage.student;
        var arr=eval(data);
        var str="";
        for(var i=0;i<arr.length;i++){
            str+="<tr id=‘tr_"+arr[i].id+"‘><td>"+arr[i].id+"</td><td>"+arr[i].name+"</td><td>"+arr[i].age+"</td><td>"+arr[i].sex+
                    "</td><td><a href=‘#‘ onclick=‘updateshow("+i+")‘>修改</a> <a href=‘#‘ onclick=‘del("+i+")‘>删除</a></td></tr>"
        }
        document.getElementById("content").innerHTML=str;
    }

　　这里保存的数据是以字符串的形式保存的，所以之后获取到的localStorage数据需要通过eval转换类型，由于eval转换效率低，老师建议使用的是JSON.stringify()预存数据，之后使用JSON.parse()来进行解析。

function del(num){
        var data = localStorage.student;
        var arr = eval(data);
        var newArr=[];
        for(var i=0;i<arr.length;i++){
            if(i!=num){
                newArr.push(arr[i]);
            }
        }
        var str=JSON.stringify(newArr);
        localStorage.student=str;
        show();
    }

　　在删除功能上，之前没能用上splice进行下标直接删除，采取的这种重新组合数组的方式。

　　后面的增加功能上差不多，其中关于id是直接获取数组最后个的id进行+1，保证了id的唯一性。