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

链接: https://fly63.com/article/detial/5218