H5 的 sessionStorage和localStorage

来源：cnblogs　　作者：有编制的小猿　　时间：2019/9/10 10:53:40　　对本文有异议

1） H5 新增的 sessionStorage 和 localStorage 的区别

　　sessionStorage 和 java 的 session 差不多，可以短时间存储信息，电脑浏览器常用sessionStorage 存储用户登录信息（个人理解）

　　localStorage 可以永久保留用户信息，不用每次都登录，常用于APP

2）sessionStorage 和 localStorage 共有的方法：

　　1.setItem 存值

　　　　setItem就像是java里的map，但是有泛型<String,String>

　　　　sessionStorage.setItem("user",user);

　　2.getItem 取值

　　　　sessionStorage.getItem("user");

　　3.removeItem 删除值

　　　　sessionStorage.removeItem("user");

　　4.clear 清除所有值

　　　　sessionStorage.clear();

3）前端转换JSON和String

　　String转成JSON　　JSON.parse();

　　JSON转成String　　JSON.stringify();

以上就是H5新增的 sessionStorage 和 localStorage 的基本用法，结合实例会更明白他们的用法。

　　代码如下：

　　　　　　//如果falg为真，也就是验证码正确，向后台发请求
                if(flag==true){
                    $.post("http://localhost:8080/test/admin/login",{username:user,password:pwd},function (data) {
                        if(data){
                            //setItem就像是java里的map的put，但是有泛型<String,String>
                            //data是JSON类型的，所以用JSON.stringify(data)转为String
                            var s=JSON.stringify(data);
                            sessionStorage.setItem("admin",s);
                            window.location.href="index.html";
                        }else{
                            flag=false;
                            //把验证码恢复原来的状态
                            re.refresh();
                            $("#msg").html("<span style='color: red;'>用户名或密码错误，请重试！！！</span>");
                            setTimeout(function () {
                                $("#msg").html("");
                            },2000);
                        }
                    })
                }else{
                    $("#msg").html("<span style='color: red;'>请滑动验证码！！!</span>");
                    setTimeout(function () {
                        $("#msg").html("");
                    },2000);
                }